ngFor với chỉ số là giá trị trong thuộc tính

Tôi có một ngForvòng lặp đơn giản cũng theo dõi hiện tại index. Tôi muốn lưu trữ indexgiá trị đó trong một thuộc tính để tôi có thể in nó. Nhưng tôi không thể hiểu làm thế nào điều này hoạt động.

Tôi về cơ bản có điều này:

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

Tôi muốn lưu trữ giá trị của #itrong thuộc tính data-index. Tôi đã thử một vài phương pháp nhưng không có phương pháp nào hiệu quả.

Tôi có một bản demo ở đây: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

Làm thế nào tôi có thể lưu trữ indexgiá trị trong data-indexthuộc tính?

Tôi sẽ sử dụng cú pháp này để đặt giá trị chỉ mục thành một thuộc tính của phần tử HTML:

Góc> = 2

Bạn phải sử dụng letđể khai báo giá trị chứ không phải #.

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

Góc = 1

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

Dưới đây là bản cập nhật plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

Trong góc 5/6/7/8:

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

Trong các phiên bản cũ hơn

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

Angular.io ▸ API NgForOf

• Sự miêu tả
• Biến cục bộ

Ví dụ kiểm tra đơn vị

• ng_for_spec.ts

Một ví dụ thú vị khác

• Phân nhóm

Chỉ cần một bản cập nhật cho điều này, câu trả lời của Thierry vẫn đúng, nhưng đã có một bản cập nhật cho Angular2 liên quan đến:

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

Các #i = indexbây giờ sẽ đượclet i = index

CHỈNH SỬA / CẬP NHẬT:

Các *ngFornên được trên các yếu tố bạn đang muốn foreach, vì vậy trong ví dụ này nó nên là:

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

CHỈNH SỬA / CẬP NHẬT

Góc 5

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

EDIIT / CẬP NHẬT

Góc 7/8

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

Tôi nghĩ rằng nó đã được trả lời trước đó, nhưng chỉ là một sự điều chỉnh nếu bạn đang điền vào một danh sách không có thứ tự, *ngFornó sẽ xuất hiện trong phần tử mà bạn muốn lặp lại. Vì vậy, nó nên được insdide <li>. Ngoài ra, Angular2 hiện sử dụng let để khai báo một biến.

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

Các câu trả lời khác là đúng nhưng bạn có thể bỏ qua [attr.data-index]hoàn toàn và chỉ cần sử dụng

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

Bạn có thể sử dụng trực tiếp [attr.data-index] để lưu chỉ mục vào thuộc tính chỉ mục dữ liệu có sẵn trong phiên bản Angular 2 trở lên.

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

Thử cái này

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

với phân trang 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>