ngFor dengan indeks sebagai nilai dalam atribut


571

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?

Jawaban:


1002

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 .


4
Sebenarnya, attr.ini adalah sintaks untuk memberi tahu Angular2 untuk mengatur nilai ekspresi ke nama atribut. Ini tidak seperti mengevaluasi JSON, saya kira ;-) Lihat tautan ini: angular.io/docs/ts/latest/guide/template-syntax.html
Thierry Templier

1
Terima kasih, itu berhasil. Juga, saya bermaksud untuk meletakkan ngFordi libukan ul.
Vivendi

1
Saya memutar kembali hasil edit terakhir untuk mendapatkan jawaban asli dan nilai kode baru yang diperbarui. Saya sedang mencari beberapa hal beta awal dan melihat bahwa jawaban ini telah dimodifikasi, sehingga tidak lagi berlaku untuk versi beta dari sudut 2.
ps2goat

4
UPDATE: 08/2017 <div * ngFor = "biarkan pahlawan pahlawan; biarkan aku = indeks; trackBy: trackById">
Maxi

4
pada 17 Oktober 2018 Angular 6 menggunakan * ngFor = "biarkan item item; indeks sebagai i" Lihat jawaban Leo di bawah ini.
Gel

318

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

Contoh uji unit

Contoh menarik lainnya


11
ini dia! Bekerja pada 17 Oktober 2018. Terima kasih. (mengapa mereka terus mengubah sintaks, sangat menjengkelkan?
Gel

2
ini adalah jawaban yang lebih baik dan sederhana daripada yang pertama.
Kenry Sanchez

2
index as ibekerja dengan baik, terima kasih. Tetapi bukankah hal itu *ngFordimaksudkan untuk melanjutkan elemen yang akan diulangi (misalnya <li>dalam kasus ini)? Kode yang Anda sarankan membuat beberapa <ul>rather daripada beberapa <li>s.
Liran H

index as ilebih elegan darilet i = index
Dabbbb.

108

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>

3
Dan #itemseharusnya let item;-)
Günter Zöchbauer

52

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>

Saya pikir ini adalah praktik terbaik untuk menentukan arahan * ngFor di tag ul <ul * ngFor = "biarkan item item; indeks sebagai i" [attr.data-index] = "i"> <li> {{item} } </li> </ul>
bajran

1
Jika Anda menentukan ngFor di tag ul, maka entitas yang akan diulang akan menjadi ul, tetapi di sini Anda tidak ingin mengulangi ul, Anda hanya ingin mengulang pada elemen daftar yaitu li.
monica

21

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

2

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>

1

Coba ini

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

0

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.