ngÖzellikte değer olarak dizinli forFor

Ben de ngForakımı takip eden basit bir döngü var index. Bu indexdeğeri yazdırabilmek için bir öznitelikte saklamak istiyorum . Ama bunun nasıl çalıştığını anlayamıyorum.

Temelde bu var:

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

Değerini #iöznitelikte saklamak istiyorum data-index. Birkaç yöntem denedim ama hiçbiri işe yaramadı.

Burada bir demom var: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

indexDeğeri data-indexöznitelikte nasıl saklayabilirim ?

Dizin değerini HTML öğesinin bir özniteliğine ayarlamak için bu sözdizimini kullanırsınız:

Açısal> = 2

letDeğeri beyan etmek için kullanmak zorundasınız #.

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

Açısal = 1

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

Güncellenmiş plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

Açılı 5/6/7/8:

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

Eski sürümlerde

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

Angular.io ▸ API ▸ NgForOf

• Açıklama
• Yerel değişkenler

Birim test örnekleri

• ng_for_spec.ts

Bir başka ilginç örnek

• gruplandırma

Sadece bir güncelleme, Thierry'nin cevabı hala doğru, ancak Angular2'de aşağıdakilerle ilgili bir güncelleme yapıldı:

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

#i = indexŞimdi olmalılet i = index

DÜZENLEME / GÜNCELLEME:

*ngForOlması gereken bu nedenle örneğin, sen foreach isteyen konum eleman olmalıdır:

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

DÜZENLEME / GÜNCELLEME

Açısal 5

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

EDIIT / GÜNCELLEME

Açısal 7/8

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

Sanırım daha önce cevaplanmıştı, ama sadece sıralanmamış bir listeyi dolduruyorsanız bir düzeltme *ngFor, tekrarlamak istediğiniz öğeye gelecek. Bu yüzden içeride olmalı <li>. Ayrıca, Angular2 artık bir değişkeni bildirmek için let kullanıyor.

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

Diğer cevaplar doğru ama [attr.data-index]tamamen atlayabilir ve sadece

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

Dizini, Açısal sürüm 2 ve üstü için geçerli olan veri dizini özelliğine kaydetmek için doğrudan [attr.data-index] öğesini kullanabilirsiniz .

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

Bunu dene

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

laravel sayfalama ile

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>