为了解决Angular mat-table中的行内编辑问题,可以使用Reactive Forms来设置表单,并使用以下代码来解决行内字段之间的数据绑定问题:
在模板中添加以下代码:
Field 1
Field 2
然后,您需要在组件中设置表单和处理字段更改事件的方法。以下是一个示例实现:
export class MyComponent implements OnInit {
dataSource: MatTableDataSource;
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
field1: [''],
field2: [''],
});
this.dataSource = new MatTableDataSource([...]);
}
onField1Change(row: MyData) {
row.field1 = this.form.get('field1').value;
this.dataSource.data = [...this.dataSource.data];
}
onField2Change(row: MyData) {
row.field2 = this.form.get('field2').value;
this.dataSource.data = [...this.dataSource.data];
}
}
请注意以下代码中的以下事项:
form
被设置为使用formBuilder
创建的FormGroup
(keyup)
事件被绑定到每个输入框,并传递行数据作为参数onField1Change
和onField2Change
方法将输入框的值分配给数据行,并将更改的数据分配回数据源,以更新表格中的所有行。通过使用Reactive Forms和以上代码示例,您可以成功地解决Angular mat-table中的行内编辑问题,并且能够在行内字段之间正确地设置数据绑定。