javascript - 如何动态添加id到表行，以便它们可以被唯一标识

Question

我在 manage.component.html 中有一个表结构，其中填充了来自服务器的数据。我有一个“编辑”按钮，可用于编辑列中的单元格。

要求:我想唯一标识每个单元格，可以进一步用于编辑并将值返回值发送回服务器以进行更新。

我试图将“counter”附加到的“id”，这样可以用来唯一标识每个行单元格，但是“counter”没有设置在“id”上

管理组件.html

<tbody>
          <tr *ngFor="let work of workflows$">
            <td>{{work.req_id}}</td>
            <td><input id="btnn{{count$}}" type="text" value="{{work.client_ip}}" maxlength="4" placeholder="name" onload="addID()"/></td>
            <td>{{work.client_type}}</td>
            <td>{{work.project}}</td>
            <td><button (click)="edit()" type="button" class="btn btn-primary">Edit</button></td>
          </tr>
</tbody>

管理.component.ts

export class ManageComponent implements OnInit {

count$ = 0;

edit(event){
    document.getElementById('btnn').focus();
  }

addID(){
    this.count$ = 5;
  }
}

当我点击“编辑”按钮时，焦点应该在行的元素上，编辑后当我点击“发送”按钮时，值的变化应该可以在 .ts 文件中访问，这样该值就可以发送回服务器。

Answer 1

有多种方法可以做到这一点。但是既然你想通过 id 或 class 来获取它，请查看下面的代码

<tbody>
          <tr *ngFor="let work of workflows$; let i = index">
            <td>{{work.req_id}}</td>
            <td><input id="btnn-{{i}}" type="text" value="{{work.client_ip}}" maxlength="4" placeholder="name" onload="addID(i)"/></td>
            <td>{{work.client_type}}</td>
            <td>{{work.project}}</td>
            <td>

            <!-- Pass the index i as a parameter in edit() method -->
            <button (click)="edit(i)" type="button" class="btn btn-primary">Edit</button>

            </td>
          </tr>
</tbody>

在你的 typescript 中

edit(_index){
    document.getElementById('btnn-'+_index).focus(); //get the element by id
  }

希望对你有帮助