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

【问题标题】：Pass data from dynamic mat-cell to on-click function将数据从动态 mat-cell 传递到点击功能
【发布时间】：2019-07-05 20:54:58
【问题描述】：

我有一个垫表，用于显示从服务接收到的数据。此表中的一列显示存储在表中显示的对象中的属性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}} 访问这些数据，我还能如何访问这些数据并将其传递给我的函数？

【问题讨论】：

不会将元素传递到 fn 中吗？喜欢这个 showDeleteModal(element)？
@Qellson 这是我尝试的第一件事，但在这种情况下功能未解决。
如果你连续通过？因为该块的 html 模板变量是 row
@Qellson 是的，这行得通。看起来我让事情变得比他们需要的更难。干杯。
没问题！干杯:)

标签： angular angular-material

【解决方案1】：

只需在函数中传递row 对象即可。

这应该有效： (click)="showDeleteModal(row)"

之后，您可以像这样检索名称属性：

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

【讨论】：

你也可以只传递需要的字段：(click)="showDeleteModal(row.name)"
确实，我只是想强调一下，您可以访问showDeleteModal 函数中的任何对象属性。