ngFor com índice como valor no atributo

Eu tenho um simple ngFor loop, que também mantém o controle do index atual. Eu quero armazenar esse valor de index em um atributo para que eu possa imprimi-lo. Mas não consigo descobrir como isso funciona.

Eu basicamente tenho isso:

 
  • {{item}}

Eu quero armazenar o valor de #i no atributo data-index . Eu tentei vários methods, mas nenhum deles funcionou.

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

Como posso armazenar o valor do data-index atributo data-index ?

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

 
  • {{item}}

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

Atualização para lançamentos angulares recentes Você precisa usar let para declarar o valor em vez de # .

 
  • {{item}}

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

 
  • {{item}}

O #i = index agora deve ser let i = index

EDITAR / ATUALIZAR:

O *ngFor deve estar no elemento que você está querendo foreach, então, para este exemplo, deve ser:

 
  • {{item}}

EDITAR / ATUALIZAR

Angular 5

 
  • {{item}}

Em Angular 5/6:

 
  • {{i+1}} {{item}}

(Veja Variáveis ​​Locais )

Eu acho que já foi respondida antes, mas apenas uma correção se você está preenchendo uma lista não ordenada, o *ngFor virá no elemento que você deseja repetir. Então deve ser insdide

  • . Além disso, Angular2 agora usa let para declarar uma variável.

     
    • {{item}}

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

     
    • {{i + 1}}

    Em Angular 5

     
    # header1 header2
    {{i+1}} {{item.Name}} {{item.Age}}