在Angular 6中,可以使用SelectionModel来选择和管理数据。下面是一个示例,展示如何从SelectionModel中检索数据:
首先,安装@angular/cdk库,它提供了SelectionModel的功能:
npm install @angular/cdk --save
在你的组件中,导入SelectionModel和MatTableDataSource:
import { SelectionModel } from '@angular/cdk/collections';
import { MatTableDataSource } from '@angular/material/table';
在组件类中定义SelectionModel和数据源:
export class YourComponent {
selection = new SelectionModel(true, []);
dataSource = new MatTableDataSource(yourDataArray);
}
其中,yourDataArray
是你的数据数组。
在HTML模板中使用MatTable来显示数据,并将SelectionModel和数据源绑定在一起:
在组件类中添加一些帮助方法来控制SelectionModel的行为:
masterToggle() {
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
masterToggle
方法用于全选和全不选所有行,isAllSelected
方法用于判断是否所有行都被选中。
最后,在需要的地方使用this.selection.selected
来获取选中的数据:
const selectedData = this.selection.selected;
以上示例演示了如何使用SelectionModel来选择和管理数据,并从中检索选中的数据。希望对你有所帮助!