Question

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

Answer 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

Answer 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.

}

Angular Material表复选框的行值选中

2 个答案: