ngFor z indeksem jako wartością w atrybucie

Mam prostą ngForpętlę, która również śledzi prąd index. Chcę zapisać tę indexwartość w atrybucie, aby móc ją wydrukować. Ale nie mogę zrozumieć, jak to działa.

Zasadniczo mam to:

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

Chcę zapisać wartość #iw atrybucie data-index. Próbowałem kilku metod, ale żadna z nich nie działała.

Mam tutaj wersję demo: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

Jak mogę zapisać indexwartość w data-indexatrybucie?

Użyłbym tej składni, aby ustawić wartość indeksu w atrybucie elementu HTML:

Kątowe> = 2

Musisz użyć, letaby zadeklarować wartość zamiast #.

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

Kątowe = 1

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

Oto zaktualizowany plik plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

W Angular 5/6/7/8:

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

W starszych wersjach

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

Angular.io ▸ API ▸ NgForOf

• Opis
• Zmienne lokalne

Przykłady testów jednostkowych

• ng_for_spec.ts

Kolejny interesujący przykład

• Grupowanie

Tylko aktualizacja tego, odpowiedź Thierry'ego jest nadal poprawna, ale do Angular2 wprowadzono aktualizację dotyczącą:

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

#i = indexPowinien byćlet i = index

EDYCJA / AKTUALIZACJA:

*ngForPowinny być na elemencie pan chce foreach, więc na tym przykładzie powinno być:

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

EDYCJA / AKTUALIZACJA

Kątowy 5

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

EDYCJA / AKTUALIZACJA

Kątowy 7/8

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

Myślę, że już na nie odpowiedziano, ale tylko korekta, jeśli wypełniasz nieuporządkowaną listę, *ngForpojawi się element, który chcesz powtórzyć. Więc powinno być insidide <li>. Ponadto Angular2 używa teraz let do deklarowania zmiennej.

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

Pozostałe odpowiedzi są poprawne, ale możesz [attr.data-index]całkowicie pominąć i po prostu użyć

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

Możesz użyć [attr.data-index] bezpośrednio, aby zapisać indeks w atrybucie data-index, który jest dostępny w Angular wersji 2 i wyższych.

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

Spróbuj tego

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

z paginacją 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>