ngFür mit Index als Wert im Attribut

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 ?

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 .

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

• Beschreibung
• Lokale Variablen

Unit-Test-Beispiele

• ng_for_spec.ts

Ein weiteres interessantes Beispiel

• Gruppierung

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>

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>

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

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>

Versuche dies

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

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>