当从 mat-select 下拉列表中引发事件时，如何获取行中其他列的值？

Question

使用 Angular 7 材质，我需要在 mat-select 下拉菜单的selectionChanged<\/code>事件中（期间）获取 mat-table 行中所有元素的数据。 我可以获得在事件处理程序中更改的选择，但我需要事件处理程序中同一行中其他列的值。 作为 Angular 的新手，我不知道如何获取数据。 如何获取引发事件的行中其他列的值？

.html<\/strong>

<td mat-cell *matCellDef="let element">
  <mat-select (selectionChange)="onNotesChange($event)">
        <mat-option *ngFor="let item of predefinedNotes" [value]="item.id">
          {{item.value}}
        </mat-option>
      </mat-select>
</td>

Answer 1

将[value]="item.id"替换为[value]="item"

试试这样：

<mat-option *ngFor="let item of predefinedNotes" [value]="item">
     {{item.value}}
</mat-option>

Answer 2

我解决了这个问题

<tr mat-row *matRowDef="let row; columns: displayedColumns;" click)="selectDataRow(row);">

这会在mat-select选择更改事件之前触发，因此我能够将行保存在组件中以便在 click 事件中访问。

selectDataRow(row:Employee){
    this.dataRowClicked = row;
}

Answer 3

更简洁的方法是通过创建映射在同一个调用中传递行对象和选定的值：

<mat-option *ngFor="let item of predefinedNotes" [value]="{element: element, value: item}">

在您的函数中，您可以提取这两个项目：

onNotesChange(event: MatSelectChange) {
  const value: { e: ElementType; v: ItemType } = event.value;
  const element = value.e; // This is the row object
  const item = value.i; // This is the selected mat-select object
  ...
}

我不知道你的类型是什么，所以我只是放了占位符。 您不必强烈键入它，但如果可能的话，我喜欢。