Ich habe eine einfache ngFor
Schleife, die auch den Strom verfolgt index
. Ich möchte diesen index
Wert in einem Attribut speichern, damit ich ihn drucken 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 speichern data-index
. Ich habe verschiedene Methoden ausprobiert, aber keine davon hat funktioniert.
Ich habe hier eine Demo: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview
Wie kann ich den index
Wert im data-index
Attribut speichern ?
attr.
ist dies eine Syntax, mit der Angular2 angewiesen wird, den Wert des Ausdrucks auf den Attributnamen festzulegen. Es ist nicht nur wie JSON zu evaluieren, denke ich ;-) Siehe diesen Link: angular.io/docs/ts/latest/guide/template-syntax.htmlngFor
auf dasli
anstelle des setzenul
.In Angular 5/6/7/8:
In älteren Versionen
Angular.io ▸ API ▸ NgForOf
Unit-Test-Beispiele
Ein weiteres interessantes Beispiel
quelle
index as i
funktioniert super, danke. Aber soll das nicht*ngFor
auf das zu wiederholende Element gehen (zB das<li>
in diesem Fall)? Der von Ihnen vorgeschlagene Code erstellt mehrere<ul>
s anstelle mehrerer<li>
s.index as i
ist eleganter alslet i = index
Nur ein Update dazu, Thierrys Antwort ist immer noch richtig, aber es gab ein Update für Angular2 in Bezug auf:
Das
#i = index
sollte jetzt seinlet i = index
EDIT / UPDATE:
Das
*ngFor
sollte sich auf dem Element befinden, das Sie suchen möchten, also sollte es für dieses Beispiel sein:BEARBEITEN / AKTUALISIEREN
Winkel 5
EDIIT / UPDATE
Winkel 7/8
quelle
#item
sollte seinlet item
;-)Ich denke, es wurde bereits zuvor beantwortet, aber nur eine Korrektur, wenn Sie eine ungeordnete Liste füllen,
*ngFor
wird das in dem Element kommen, das Sie wiederholen möchten. Also sollte es insdide sein<li>
. Außerdem verwendet Angular2 jetzt let, um eine Variable zu deklarieren.quelle
Die anderen Antworten sind richtig, aber Sie können das
[attr.data-index]
Ganze weglassen und einfach verwendenquelle
Sie können [attr.data-index] direkt verwenden, um den Index im Datenindexattribut zu speichern, das in Angular-Versionen 2 und höher verfügbar ist.
quelle
Versuche dies
quelle
mit Laravel-Paginierung
quelle