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

将数据从动态Mat-Cell传递到单击功能

1 个答案: