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

Posted 2023-03-05

【中文标题】Angular，如何使用 *ngFor 或 HTML 表的任何重复设置行 ID

【英文标题】：Angular, How to set row ID with *ngFor or any repetition for HTML-table

【发布时间】：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？

谢谢

【参考方案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="row1+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="rowi+1">
                <td> d.id </td>
                <td> d.name </td>
                <td> d.email </td>
                <td> d.age </td>
            </tr>
        </table>
</div>