javascript - 如何向表行中动态添加ID，以便可以唯一地标识它们

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

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

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

manage.component.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>

manage.component.ts

export class ManageComponent implements OnInit {

count$ = 0;

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

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

当我单击“编辑”按钮时，焦点应放在行的元素上，在编辑后，当我单击“发送”按钮时，应在.ts文件中访问值的更改，以便可以将值发送回服务器。

最佳答案

有多种方法可以做到这一点。但是，由于您想通过ID或类来获取它，因此请查看以下代码

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

在你的打字稿中

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

希望能有所帮助

关于javascript - 如何向表行中动态添加ID，以便可以唯一地标识它们，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56143692/