ngFor with index作为属性中的值

5 回答

• 96

  仅仅是对此的更新，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 应该在您想要预告的元素上，因此对于此示例，它应该是：

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

  编辑/ UPDATE

  Angular 5

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

  回复于 2024-04-27T01:06:24+08:00
• 14

  其他答案是正确的，但您可以完全省略 [attr.data-index] 并使用

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

  回复于 2024-04-27T01:06:24+08:00
• 43

  我将使用此语法将索引值设置为HTML元素的属性：

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

  这是更新的plunkr：http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview .

  Update for recent angular 2 releases 您必须使用 let 来声明值而不是 # .

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

  回复于 2024-04-27T01:06:24+08:00
• 75

  我认为它之前已经得到了回答，但如果你填充无序列表只是一个修正， *ngFor 将出现在你要重复的元素中 . 所以它应该是 <li> . 此外，Angular2现在使用let来声明变量 .

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

  回复于 2024-04-27T01:06:24+08:00
• 504

  在Angular 5/6中：

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

  （见Local Variables）

  回复于 2024-04-27T01:06:24+08:00