角，如何将行ID设置为*ngFor或HTML-table的任何重复

Question

我希望为每一行设置一个ID，动态地设置ngFor或角中的任何重复。

​

<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？

谢谢

Answer 1

我认为在您的例子中，没有必要使用额外的index变量：

这将节省来自前端的位处理，因为它不需要维护任何索引varible。

只需使用：

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

取代……

<tr id="row">

Answer 2

您可以使用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>

Answer 3

你可以试试下面的代码

<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>

谢谢,