Angular，如何使用 *ngFor 或 HTML 表的任何重复设置行 ID答案

【问题标题】：Angular, How to set row ID with *ngFor or any repetition for HTML-tableAngular，如何使用 *ngFor 或 HTML 表的任何重复设置行 ID
【发布时间】：2018-04-12 05:54:57
【问题描述】：

我想为每一行动态设置一个 ID ngFor 或 Angular 中的任何重复。

<div *ngFor="let d of data | async">
        <table border=1>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
          </tr>
            <tr id="row">
                <td>{{ d.id }}</td>
                <td>{{ d.name }}</td>
                <td>{{ d.email }}</td>
                <td>{{ d.age }}</td>
            </tr>
        </table>

所以任何人都可以帮助我如何使行具有row1、row2、row3 等 ID？

谢谢

【问题讨论】：

标签： html angular html-table

【解决方案1】：

您可以使用 index 并分配给 rowId 并使用

<div *ngFor="let d of data; let rowId= index | async">

然后

 <tr [attr.id]=rowId>
    <td>{{ d.id }}</td>
    <td>{{ d.name }}</td>
    <td>{{ d.email }}</td>
    <td>{{ d.age }}</td>
 </tr>

【讨论】：

所以tr变成这样<tr id="rowId">? CMIIW
只需使用

【解决方案2】：

你可以试试下面的代码

<div *ngFor="let d of (data | async) ; let i = index">
            <table border=1>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Age</th>
              </tr>
                <tr id="row{{1+i}}">
                    <td>{{ d.id }}</td>
                    <td>{{ d.name }}</td>
                    <td>{{ d.email }}</td>
                    <td>{{ d.age }}</td>
                </tr>
            </table>
    </div>

谢谢，

【讨论】：

【解决方案3】：

我认为在你的情况下，没有必要使用额外的index 变量：

这将节省前端的位处理，因为它不必维护任何索引变量。

只需使用：

<tr [attr.id]="d.id">

代替

<tr id="row">

【讨论】：

我认为他应该这样做，因为 id 可能有不同的值
一个非常聪明简单的解决方案，非常感谢！

【解决方案4】：

使用下面的代码：

<div *ngFor="let d of data ; let i=index | async">
        <table border=1>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
          </tr>
            <tr id="row{{i+1}}">
                <td>{{ d.id }}</td>
                <td>{{ d.name }}</td>
                <td>{{ d.email }}</td>
                <td>{{ d.age }}</td>
            </tr>
        </table>
</div>

【讨论】：