Получить данные из выбранной строки в таблице

Question

Я получил простую таблицу с динамическими c данными, предоставленными api.

 <table class="table align-items-center table-flush responsive">
                    <thead class="thead-light">
                      <tr>
                        <th scope="col" style="width: 8px">ID</th>
                        <th scope="col">NAME</th>
                        <th scope="col">RECIPIENTS</th>
                        <th scope="col" class="text-right">ACTION</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let aliases of alias; let i = index;">
                        <td id="nr">{{aliases.nr}}</td>
                        <td id="lPart">{{aliases.local_part}}</td>
                        <td id='{{ i+1 }}' (click)="onClick($event)" style="cursor: pointer;font-weight: bold;">
                          {{aliases.recipients}}
                        </td>
                        <td class="text-right">
                          <button class="btn btn-sm btn-primary">Edit</button>
                          <button class="btn btn-sm btn-danger">Delete</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>

И вот мой модал:

<div class="modal" id="myModal" [style.display]="showModal ? 'block' : 'none'">
        <div class="modal-dialog">
          <div class="modal-content">

            <div class="modal-header">
              <h4 class="modal-title">NAME: <strong>{{title}}</strong></h4>
            </div>

            <div class="modal-body">
              {{ recipients }}<br>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="hide()">Close</button>
            </div>

          </div>
        </div>
      </div>

и мой component.ts

  onClick(event) {

    this.showModal = true;
    this.choosedId = event.target.id;  
     console.log('id: '+this.choosedId);    
  }
  hide() {
    this.showModal = false;
  }

  getAliases() {
    this.aliasesService.getAliases().subscribe(
      res => {
        this.alias = res;
      },
      err => console.error(err)
    );
  }

Я получил идентификатор выбранной строки, но как я могу получить данные о «получателях» и поместить их в мой модал?

Я хочу отобразить в своем заголовке мод (это aliases.local_part) и получатели (это aliases.recipients), но только по нажатой строке в таблице.

Answer 1

Поместите данные вашей строки в клик

(click)="onClick(aliases)