单击行时不会触发 mat-table 操作答案

【问题标题】：mat-table action does not fire when row clicked单击行时不会触发 mat-table 操作
【发布时间】：2018-06-26 18:41:53
【问题描述】：

我对 angular 还很陌生，并试图利用 mat 表的一些功能。虽然我已经完成了大部分我需要完成的工作，但当我单击一行时，我无法触发任何操作。我对此功能的测试是删除单击的行。我真正想要的是显示另一个组件，但我还没有开始这样做，所以删除提供了一个明确的信号，表明点击正在为正确的行触发。

表格如下：

<mat-table #table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Part Name</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.title }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="partNumber">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Part Number</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.partNumber }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Description</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.description }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="leadTime">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Lead Time</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.leadTime }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Weight</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.weight }}</mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" click="displayDetail(row._id)"></mat-row>

</mat-table>

在我的组件文件中触发以下事件：

partList: Array<Part> = new Array<Part>();
dataSource = new MatTableDataSource(this.partList);

displayDetail(i) {
   this.partList.splice(i, 1);
}

我已经搞砸了很多东西，几乎完成了我能想到的所有事情，但我觉得我对 Angular 的缺乏经验导致我忽略了一些简单的事情。

【问题讨论】：

标签： typescript angular5

【解决方案1】：

回答这个问题以防其他人遇到类似问题。

我的代码有一些问题，但这是现在工作的代码块：

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" 
     (click)="displayDetail(row.partNumber)"></mat-row>

这确定了一些问题。 click 应该用括号括起来（我不确定这是一个问题，但它是导致它工作的步骤的一部分）。

真正的问题是行对象。我从中采购的示例在其 mat 列集中有一个 _id 字段。此行对象不是特定于 mat 的东西，而只是表示来自数据源的数据的对象（我理解的错误是它是特定于 mat 表的东西）。因此，它只有您从数据源提供的行/数据。如果我的数据中有一个 id 字段，我可以通过 id 调用它。因为它没有，我没有得到有效的信息。

我将其更改为在需要传递给下一个组件的数据中返回一个唯一标识符。一切都很好。

【讨论】：