wake-up-neo.com

ngFor mit Index als Wert im Attribut

Ich habe eine einfache ngFor -Schleife, die auch die aktuelle index verfolgt. Ich möchte diesen index -Wert in einem Attribut speichern, damit ich ihn ausdrucken kann. Aber ich kann nicht herausfinden, wie das funktioniert.

Ich habe im Grunde das:

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

Ich möchte den Wert von #i im Attribut data-index speichern. Ich habe verschiedene Methoden ausprobiert, aber keine hat funktioniert.

Ich habe eine Demo hier: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

Wie kann ich den Wert index im Attribut data-index speichern?

angularngfor
432
Vivendi

Ich würde diese Syntax verwenden, um den Indexwert in ein Attribut des HTML-Elements zu setzen:

Winkel> = 2

Sie müssen let verwenden, um den Wert anstelle von # zu deklarieren.

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

Winkel = 1

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

Hier ist die aktualisierte Version: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

750
Thierry Templier

In Angular 5/6/7/8:

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

In älteren Versionen

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

Angular.io ▸ API ▸ NgForOf

Unit-Test-Beispiele

Ein weiteres interessantes Beispiel

229
Leo

Nur ein Update dazu, Thierrys Antwort ist immer noch korrekt, aber es gab ein Update für Angular2 in Bezug auf:

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

Der #i = index sollte nun let i = index sein

EDIT/UPDATE:

Der *ngFor sollte sich auf dem Element befinden, für das Sie suchen. In diesem Beispiel sollte es also sein:

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

EDIT/UPDATE

Winkel 5

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

EDIIT/UPDATE

Winkel 7/8

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

Ich denke, es wurde bereits beantwortet, aber nur eine Korrektur, wenn Sie eine ungeordnete Liste füllen, wird der *ngFor in das Element kommen, das Sie wiederholen möchten. Also sollte es insdide <li> sein. Außerdem verwendet Angular2 jetzt let, um eine Variable zu deklarieren.

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

Die anderen Antworten sind korrekt, aber Sie können den [attr.data-index] ganz weglassen und einfach verwenden

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

Versuche dies

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