ngFor z indeksem jako wartością w atrybucie

571

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?

Vivendi
źródło

Odpowiedzi:

998

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 .

Thierry Templier
źródło
4
W rzeczywistości attr.jest to składnia informująca Angular2, aby ustawiła wartość wyrażenia na nazwę atrybutu. Chyba nie chodzi tylko o ocenę JSON ;-) Zobacz ten link: angular.io/docs/ts/latest/guide/template-syntax.html
Thierry Templier
1
Dzięki, to załatwia sprawę. Ponadto chciałem umieścić ngForna lizamiast zamiast ul.
Vivendi,
1
Cofnąłem ostatnią edycję, aby uzyskać zarówno oryginalną odpowiedź, jak i nową zaktualizowaną wartość kodu. Szukałem wczesnych wersji beta i zobaczyłem, że ta odpowiedź została zmodyfikowana, więc nie dotyczy już wersji beta kątowej 2.
ps2goat,
4
AKTUALIZACJA: 08/2017 <div * ngFor = "let hero of heroes; let i = index; trackBy: trackById">
Maxi
4
od 17 października 2018 r. Angular 6 używa * ngFor = "let item of items; index as i" Zobacz odpowiedź Leo poniżej.
Gel
318

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

Przykłady testów jednostkowych

Kolejny interesujący przykład

Lew
źródło
11
to jest to! Działa od 17 października 2018 r. Dziękuję Ci. (dlaczego ciągle zmieniają składnię, tak denerwujące?
Gel
2
jest to lepsza i prosta odpowiedź niż pierwsza.
Kenry Sanchez
2
index as idziała świetnie, dziękuję. Ale czy nie *ngForchodzi o powtarzanie elementu (np. <li>W tym przypadku)? Sugerowany kod tworzy wiele <ul>s zamiast wielu <li>s.
Liran H
index as ijest bardziej elegancki niżlet i = index
Dabbbb.
108

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>
Wesley Coetzee
źródło
3
I #itempowinno być let item;-)
Günter Zöchbauer
52

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>
Monika
źródło
Myślę, że najlepszą praktyką jest określenie dyrektywy * ngFor w ul tag <ul * ngFor = "let item of items; index as i" [attr.data-index] = "i"> <li> {{item} } </li> </ul>
bajran
1
Jeśli określisz ngFor w znaczniku ul, wówczas jednostką, która będzie powtarzana, będzie ul, ale tutaj nie chcesz powtarzać ul, po prostu chcesz iterować elementy listy, tj. Li.
monica,
21

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
Alf Moh
źródło
2

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>
Arun s
źródło
1

Spróbuj tego

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>
Chirag
źródło
0

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>
Vijay Kanaujia
źródło