ngFor com índice como valor no atributo

Eu tenho um ngForloop simples que também mantém o controle da corrente index. Quero armazenar esse indexvalor em um atributo para que eu possa imprimi-lo. Mas não consigo descobrir como isso funciona.

Eu basicamente tenho isso:

<ul *ngFor="#item of items; #i = index" data-index="#i">
    <li>{{item}}</li>
</ul>

Eu quero armazenar o valor #ino atributo data-index. Eu tentei vários métodos, mas nenhum deles funcionou.

Eu tenho uma demonstração aqui: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

Como posso armazenar o indexvalor no data-indexatributo?

Eu usaria essa sintaxe para definir o valor do índice em um atributo do elemento HTML:

Angular> = 2

Você precisa usar letpara declarar o valor e não #.

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

Angular = 1

<ul>
    <li *ngFor="#item of items; #i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

Aqui está o plunkr atualizado: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

No Angular 5/6/7/8:

<ul>
  <li *ngFor="let item of items; index as i">
    {{i+1}} {{item}}
  </li>
</ul>

Nas versões mais antigas

<ul *ngFor="let item of items; index as i">
  <li>{{i+1}} {{item}}</li>
</ul>

Angular.io, API e NgForOf

• Descrição
• Variáveis ​​locais

Exemplos de teste de unidade

• ng_for_spec.ts

Outro exemplo interessante

• Agrupamento

Apenas uma atualização para isso, a resposta de Thierry ainda está correta, mas houve uma atualização para o Angular2 com relação a:

<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
  <li>{{item}}</li>
</ul>

O #i = indexagora deve serlet i = index

EDIT / UPDATE:

Ele *ngFordeve estar no elemento que você deseja transmitir, portanto, neste exemplo, deve ser:

<ul>
  <li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li>
</ul>

EDITAR / ATUALIZAR

Angular 5

<ul>
  <li *ngFor="let item of items; index as i" [attr.data-index]="i">{{item}}</li>
</ul>

EDIIT / UPDATE

Angular 7/8

<ul *ngFor="let item of items; index as i">
  <li [attr.data-index]="i">{{item}}</li>
</ul>

Acho que já foi respondido antes, mas apenas uma correção, se você estiver preenchendo uma lista não ordenada, *ngForaparecerá no elemento que você deseja repetir. Portanto, deve ser insidioso <li>. Além disso, o Angular2 agora usa let para declarar uma variável.

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">     
               {{item}}
    </li>
</ul>

As outras respostas estão corretas, mas você pode omitir [attr.data-index]completamente e usar

<ul>
    <li *ngFor="let item of items; let i = index">{{i + 1}}</li>
</ul

Você pode usar [attr.data-index] diretamente para salvar o índice no atributo data-index, disponível nas versões 2 e acima do Angular.

    <ul*ngFor="let item of items; let i = index" [attr.data-index]="i">
         <li>{{item}}</li>
    </ul>

Tente isto

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>

com paginação laravel

file.component.ts file

    datasource: any = {
        data: []
    }

    loadData() {
        this.service.find(this.params).subscribe((res: any) => {
            this.datasource = res;
        });
    }

html file

   <tr *ngFor="let item of datasource.data; let i = index">
       <th>{{ datasource.from + i }}</th>
   </tr>