在Angular中,使用mat-table
实现双向绑定可以通过以下步骤完成:
npm install @angular/material @angular/cdk @angular/animations
MatTableModule
和MatInputModule
:import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
@NgModule({
imports: [
MatTableModule,
MatInputModule
],
...
})
export class YourModule { }
mat-table
并绑定数据源和输入框的值:
Name
Age
import { Component } from '@angular/core';
export interface Item {
name: string;
age: number;
}
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
displayedColumns: string[] = ['name', 'age']; // 列名
dataSource: Item[] = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
// 其他数据
];
}
这样,当用户在输入框中修改数据时,双向绑定会自动更新数据源中的值。
上一篇:Angular `build` 在使用`webpack`声明外部依赖时抛出错误。
下一篇:Angular `useFactory` Service 设置抛出Uncaught Error: Can't Resolve all parameters for Component错误。