ngFür mit Index als Wert im Attribut

571

Ich habe eine einfache ngForSchleife, die auch den Strom verfolgt index. Ich möchte diesen indexWert 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 #iim 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 indexWert im data-indexAttribut speichern ?

Vivendi
quelle

Antworten:

1000

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

Winkel> = 2

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

<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 das aktualisierte Plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

Thierry Templier
quelle
4
Tatsächlich 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.html
Thierry Templier
1
Danke, das macht den Trick. Außerdem wollte ich das ngForauf das lianstelle des setzen ul.
Vivendi
1
Ich habe die letzte Bearbeitung zurückgesetzt, um sowohl die ursprüngliche Antwort als auch den neuen aktualisierten Codewert zu erhalten. Ich war auf der Suche nach frühen Beta-Inhalten und habe festgestellt, dass diese Antwort geändert wurde, sodass sie nicht mehr für die Beta-Version von
Angular
4
UPDATE: 08/2017 <div * ngFor = "Held der Helden lassen; i = Index lassen; trackBy: trackById">
Maxi
4
Stand 17. Oktober 2018 Angular 6 verwendet * ngFor = "Element von Elementen lassen; Index als i" Siehe Leos Antwort unten.
Gel
318

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

Löwe
quelle
11
Das ist es! Arbeiten ab 17. Oktober 2018. Vielen Dank. (Warum ändern sie ständig die Syntax, so nervig?
Gel
2
Dies ist eine bessere und einfachere Antwort als die erste.
Kenry Sanchez
2
index as ifunktioniert super, danke. Aber soll das nicht *ngForauf das zu wiederholende Element gehen (zB das <li>in diesem Fall)? Der von Ihnen vorgeschlagene Code erstellt mehrere <ul>s anstelle mehrerer <li>s.
Liran H
index as iist eleganter alslet i = index
Dabbbb.
108

Nur ein Update dazu, Thierrys Antwort ist immer noch richtig, 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>

Das #i = indexsollte jetzt seinlet i = index

EDIT / UPDATE:

Das *ngForsollte sich auf dem Element befinden, das Sie suchen möchten, also sollte es für dieses Beispiel sein:

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

BEARBEITEN / AKTUALISIEREN

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>
Wesley Coetzee
quelle
3
Und #itemsollte sein let item;-)
Günter Zöchbauer
52

Ich denke, es wurde bereits zuvor beantwortet, aber nur eine Korrektur, wenn Sie eine ungeordnete Liste füllen, *ngForwird 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.

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">     
               {{item}}
    </li>
</ul>
Monica
quelle
Ich denke, dass es die beste Vorgehensweise ist, die * ngFor-Direktive im ul-Tag <ul * ngFor = "Element von Elementen lassen; Index als i" anzugeben [attr.data-index] = "i"> <li> {{item} } </ li> </ ul>
Bajran
1
Wenn Sie ngFor im ul-Tag angeben, ist die Entität, die wiederholt wird, ul, aber hier möchten Sie die ul nicht wiederholen, sondern nur die Listenelemente iterieren, dh li.
Monica
21

Die anderen Antworten sind richtig, aber Sie können das [attr.data-index]Ganze weglassen und einfach verwenden

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

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.

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

Versuche dies

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

mit Laravel-Paginierung

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
quelle