Передача данных из динамической ячейки в функцию щелчка

Question

У меня есть таблица соответствия, которую я использую для отображения данных, полученных от службы. В одном из столбцов этой таблицы отображается свойство name, хранящееся в объектах, отображаемых в таблице.

Мой стол выглядит так.

<table class="session-table" mat-table [dataSource]="sessions">

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.sessionName}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="date">
        <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.sessionDate}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="link">
        <mat-header-cell *matHeaderCellDef>Link</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.sessionLink}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="delete">
        <mat-header-cell *matHeaderCellDef>Control</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <button mat-icon-button (click)="showDeleteModal()"><mat-icon><fa name="trash" size="lg"></fa></mat-icon></button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </table>

Я хочу иметь возможность взять свойство name и передать его в функцию showDeleteModal(), которая вызывается кнопкой в ​​четвертой ячейке каждой строки. Однако я не могу просто получить доступ к этим данным, выполнив {{element.sessionName}}, как еще я могу получить доступ к этим данным и передать их своей функции?

Answer 1

Просто передайте row объект в функцию.

Это должно работать: (click)="showDeleteModal(row)"

После этого вы можете получить атрибут имени следующим образом:

showDeleteModal(row) {
   console.log(row.name);
}