下面是一个使用Angular Material表格的示例代码,该表格可以更新行,而不必全部填写值。
在这个示例中,我们假设有一个名为data
的数组,该数组包含了要在表格中显示的数据。
HTML模板:
Name
Age
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
displayedColumns: string[] = ['name', 'age'];
updateRow(row: any) {
console.log('Updated row:', row);
}
}
在这个示例中,表格使用mat-table
组件,并使用matColumnDef
定义了两个列:name
和age
。每个单元格中都有一个input
元素,用于绑定对应的行数据中的属性。[(ngModel)]
指令用于实现双向数据绑定,input
事件用于在输入改变时触发更新行的方法updateRow
。
通过这种方式,您可以只填写部分值,并通过输入框实时更新表格中的行数据。