选中的角度材质表复选框行值

Question

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

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