как динамически добавлять id в строки таблицы, чтобы их можно было однозначно идентифицировать

Question

У меня есть структура таблицы в manage.component.html, которая заполняется данными с сервера.У меня есть кнопка «Изменить», которую можно использовать для редактирования ячейки в столбце.

Требование: я хочу уникально идентифицировать каждую ячейку, которая может быть в дальнейшем использована для редактирования и отправки значения обратно на сервер для обновления.

Я попытался добавить "счетчик" к«id» для этого можно использовать для уникальной идентификации каждой ячейки строки, но «counter» не устанавливается для «id»

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, так что значение может быть отправлено обратно на сервер.

Answer 1

Существуют различные способы сделать это.Но так как вы хотели получить его по идентификатору или классу, проверьте код ниже

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

Надеюсь, что поможет