ngFor dengan indeks sebagai nilai dalam atribut

Saya memiliki ngForloop sederhana yang juga melacak arus index. Saya ingin menyimpan indexnilai itu dalam atribut sehingga saya bisa mencetaknya. Tapi saya tidak tahu bagaimana ini bekerja.

Saya pada dasarnya memiliki ini:

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

Saya ingin menyimpan nilai #idalam atribut data-index. Saya mencoba beberapa metode tetapi tidak ada yang berhasil.

Saya punya demo di sini: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

Bagaimana saya bisa menyimpan indexnilai dalam data-indexatribut?

Saya akan menggunakan sintaks ini untuk mengatur nilai indeks menjadi atribut elemen HTML:

Angular> = 2

Anda harus menggunakan letuntuk mendeklarasikan nilai daripada #.

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

Sudut = 1

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

Berikut adalah plunkr yang diperbarui: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

Dalam Angular 5/6/7/8:

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

Dalam versi yang lebih lama

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

Angular.io ▸ API ▸ NgForOf

• Deskripsi
• Variabel lokal

Contoh uji unit

• ng_for_spec.ts

Contoh menarik lainnya

• Pengelompokan

Hanya pembaruan untuk ini, jawaban Thierry masih benar, tetapi telah ada pembaruan untuk Angular2 sehubungan dengan:

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

The #i = indexsekarang haruslet i = index

EDIT / PEMBARUAN:

The *ngForharus pada elemen Anda ingin untuk foreach, jadi misalnya ini harus:

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

EDIT / PEMBARUAN

Sudut 5

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

EDIIT / PEMBARUAN

7/8 sudut

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

Saya pikir itu sudah dijawab sebelumnya, tetapi hanya koreksi jika Anda mengisi daftar yang tidak terurut, *ngForakan muncul elemen yang ingin Anda ulangi. Jadi itu harus di dalam hati <li>. Juga, Angular2 sekarang menggunakan biarkan untuk mendeklarasikan variabel.

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

Jawaban lainnya benar tetapi Anda dapat menghilangkan [attr.data-index]semuanya dan hanya menggunakan

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

Anda dapat menggunakan [attr.data-index] secara langsung untuk menyimpan indeks ke atribut indeks-data yang tersedia di versi Angular 2 dan di atasnya.

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

Coba ini

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

dengan pagination 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>