使用ngfor时为行添加自定义属性

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

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

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    // ...
  ];

  trackByFn(index, item) {
    return item.id; // 返回唯一标识符
  }
}

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn" [attr.data-id]="item.id">
    {{ item.name }}
  </li>
</ul>

<!-- 错误示例 -->
<li *ngFor="let item of items" attr-data-index="{{ i }}"> <!-- 拼写错误 -->
  {{ item }}
</li>

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

trackByFn(index, item) {
  return item.id; // 返回唯一标识符
}