检查角度材料表复选框行值答案

【问题标题】：Angular Material table checkbox row value on check检查角度材料表复选框行值
【发布时间】：2018-09-30 14:00:26
【问题描述】：

我有一个带有复选框行的角度材料表。 Material Table 基于选中和未选中，我想从选定的复选框行值中操作其他字段。

【问题讨论】：

【解决方案1】：

您需要向 PeriodicElement 添加另一个属性。

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  selectedName: string;
}

然后你创建一个函数来管理选择：

toggleCheckbox(row) {
  this.selection.toggle(row);
  row.selected = !row.selected;
}

这是您修改后的代码：

https://stackblitz.com/angular/lrpjroljdly?embed=1&file=app/table-selection-example.html

【讨论】：

【解决方案2】：

您需要为每一行维护唯一 ID，让我们说这里是用于显示表格的示例对象数组。

public tables = [{
id: 1,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}, {
id: 2,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}, {
id: 3,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}]

当用户选择/取消选择复选框时，您需要调用带有（单击）事件的函数到复选框并传递该行的列/ID。

模板：

<input type="checkbox" id="{{id}}" name="feature{{id}}"
    value="{{column.id}}"   [checked]="column.checked" ([ngModel])="column.checked" (click)="validate(column, $event)">

内部组件：

validate(id, column, event ){
   column.checked = !column.checked;
   console.log(column.id); // using this value, you can perform logic with tables array.

}

【讨论】：