我想 select 在 Mat Table 中 selection 基于 angular 中的下拉值
I want to select in Mat Table with selection Based on dropdown value in angular
我创建了一个 Table 并使用 angular material 选择。现在我想检查下拉列表的 onchange 方法中的一些特定行。
到目前为止我做了:
- 创建了 table
- 在数据库中加载值
- 创建下拉菜单和 onChange 方法
- 创建了一个保存按钮,为我提供所选值和下拉值。
现在我无法根据下拉列表的 onChange 检查行中的值。
我的数据源:
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
];
在我的下拉列表的 onChange 中,假设我只想检查这两行
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
注意:我应该能够在加载值后选中或取消选中,并在我的保存按钮中获得一个新的选中值
Here is my code in stackblitz
你可以这样改变你的onSelectRole
onSelectRole(e: any) {
this.selection.clear();
if(e==1){
const CheckThisRow = this.dataSource.data.filter(x=>x.position==1)
this.selection.select(...CheckThisRow);
}
if(e==2){
const CheckThisRow = this.dataSource.data.filter(x=>x.position==4)
this.selection.select(...CheckThisRow);
}
}
注意:请根据需要进行更改
我创建了一个 Table 并使用 angular material 选择。现在我想检查下拉列表的 onchange 方法中的一些特定行。 到目前为止我做了:
- 创建了 table
- 在数据库中加载值
- 创建下拉菜单和 onChange 方法
- 创建了一个保存按钮,为我提供所选值和下拉值。
现在我无法根据下拉列表的 onChange 检查行中的值。 我的数据源:
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
];
在我的下拉列表的 onChange 中,假设我只想检查这两行
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
注意:我应该能够在加载值后选中或取消选中,并在我的保存按钮中获得一个新的选中值 Here is my code in stackblitz
你可以这样改变你的onSelectRole
onSelectRole(e: any) {
this.selection.clear();
if(e==1){
const CheckThisRow = this.dataSource.data.filter(x=>x.position==1)
this.selection.select(...CheckThisRow);
}
if(e==2){
const CheckThisRow = this.dataSource.data.filter(x=>x.position==4)
this.selection.select(...CheckThisRow);
}
}
注意:请根据需要进行更改