ngFor ที่มีดัชนีเป็นค่าในแอตทริบิวต์

ฉันมีngForวงวนที่เรียบง่ายซึ่งติดตามกระแสindexได้เช่นกัน ฉันต้องการเก็บindexค่านั้นไว้ในแอตทริบิวต์เพื่อให้ฉันสามารถพิมพ์ได้ แต่ฉันไม่สามารถเข้าใจได้ว่ามันทำงานอย่างไร

ฉันมีสิ่งนี้โดยทั่วไป:

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

ฉันต้องการที่จะเก็บค่าของในแอตทริบิวต์#i data-indexฉันลองหลายวิธี แต่ไม่มีวิธีใดทำงาน

ฉันมีตัวอย่างที่นี่: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

ฉันจะเก็บindexค่าไว้ในdata-indexแอตทริบิวต์ได้อย่างไร

ฉันจะใช้ไวยากรณ์นี้เพื่อตั้งค่าดัชนีเป็นคุณลักษณะขององค์ประกอบ HTML:

เชิงมุม> = 2

คุณต้องใช้ในการประกาศค่ามากกว่าlet#

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

เชิงมุม = 1

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

นี่คือ plunkr updated: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview

ในเชิงมุม 5/6/7/8:

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

ในรุ่นเก่ากว่า

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

Angular.io ▸ API ▸ NgForOf

• ลักษณะ
• ตัวแปรท้องถิ่น

ตัวอย่างการทดสอบหน่วย

• ng_for_spec.ts

อีกตัวอย่างที่น่าสนใจ

• การจัดกลุ่ม

เพียงแค่อัปเดตสำหรับสิ่งนี้คำตอบของ Thierry ยังคงถูกต้อง แต่มีการอัปเดตเป็น Angular2 เกี่ยวกับ:

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

#i = indexตอนนี้ควรจะเป็นlet i = index

แก้ไข / UPDATE:

*ngForควรจะอยู่ในองค์ประกอบที่คุณต้องการที่จะ foreach ดังนั้นสำหรับตัวอย่างนี้มันควรจะเป็น:

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

แก้ไข / ปรับปรุง

เชิงมุม 5

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

EDIIT / UPDATE

เชิงมุม 7/8

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

ฉันคิดว่ามันได้รับการตอบก่อนหน้านี้ แต่เพียงการแก้ไขถ้าคุณกำลังเติมรายการที่ไม่ได้เรียงลำดับ*ngForจะมาในองค์ประกอบที่คุณต้องการทำซ้ำ ดังนั้นจึงควรจะ <li>insdide นอกจากนี้ Angular2 ตอนนี้ใช้อนุญาตให้ประกาศตัวแปร

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

คำตอบอื่น ๆ นั้นถูกต้อง แต่คุณสามารถละเว้น[attr.data-index]ทั้งหมดและเพียงแค่ใช้

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

คุณสามารถใช้[attr.data-index]โดยตรงเพื่อบันทึกดัชนีไปยังแอตทริบิวต์ data-index ซึ่งมีให้ใน Angular เวอร์ชัน 2 ขึ้นไป

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

ลองสิ่งนี้

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

ด้วยการแบ่งหน้า 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>