Angular 4 - 如何在 ngFor 循环中为标签设置唯一的 id 值？答案

【问题标题】：Angular 4 - How to have a unique id value for a tag inside an ngFor loop?Angular 4 - 如何在 ngFor 循环中为标签设置唯一的 id 值？
【发布时间】：2018-12-16 20:54:41
【问题描述】：

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

我的代码是这样的：

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

【问题讨论】：

标签： html angular typescript

【解决方案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>

【讨论】：

【解决方案2】：

使用索引生成唯一id

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

【讨论】：