angular - 将数据从动态 mat-cell 传递到点击功能

Question

我有一个 mat-table，用于显示从服务接收的数据。此表中的其中一列显示存储在表中显示的对象中的属性 name。

我的 table 看起来像这样。

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