Angular 4-如何在ngFor循环内为标签提供唯一的ID值？

Question

我遇到了一个问题，我需要在角度4的*ngFor循环中拥有的每个数据行都有唯一的id值。

我的代码是这样的：

<div *ngFor="let row of myDataList">
  <div id="thisNeedsToBeUnique">{{ row.myValue }}</div>
</div>

Answer 1

假设您的对象内有一个唯一的id值，则可以这样进行操作：

<div *ngFor="let row of myDataList">
  <div [attr.id]="row.myId">{{ row.myValue }}</div>
</div>

您也可以这样：

<div *ngFor="let row of myDataList">
  <div attr.id="{{row.myId}}">{{ row.myValue }}</div>
</div>

您还可以像这样将字符串和动态值一起隐藏起来：

<div *ngFor="let row of myDataList">
  <div [attr.id]="'myString' + row.myId">{{ row.myValue }}</div>
</div>
<!-- Or -->
<div *ngFor="let row of myDataList">
  <div attr.id="myString{{row.myId}}">{{ row.myValue }}</div>
</div>

Answer 2

使用索引生成唯一的ID

<div *ngFor="let row of myDataList; let i = index">
  <div [attr.id]="row.myValue + i">{{ row.myValue }}</div>
</div>