基于另一个多选下拉列表 PrimeNg,值不会填充到多选下拉列表值中
Values are not populating in multiselect dropdown values based on another multiselect dropdown PrimeNg
我有两个 multiselect 下拉菜单,如下所示。如果我选择
- 第一个下拉菜单:“ASIA”,然后第二个下拉菜单应填充值:“India”和“UAE”
- 第一个下拉菜单:“亚洲”和“欧洲”,然后第二个下拉菜单应填充值:“印度”、“阿联酋”和“德国”
我已经尝试了下面的代码,当我首先 select 值形式时,值没有填充在第二个下拉列表中。第二个下拉菜单总是空的。
第一个多select下拉列表:-
<p-multiSelect (onChange)="updateSecondDropdown($event)" [options]="regions" [(ngModel)]="regionValues" optionLabel="name" optionValue="name" defaultLabel="Select Regions"></p-multiSelect>
第二个多select下拉菜单:-
<p-multiSelect [options]="countries" [(ngModel)]="countryValues" optionLabel="name" optionValue="name" defaultLabel="Select Countries"></p-multiSelect>
打字稿代码:-
countries:any[]=[];
regions:any[]=[
{id:1, name:"ASIA"},
{id:2, name:"EUROPE"},
{id:3, name:"NORTH AMERICA"},
{id:4, name:"SOUTH AMERICA"},
]
countriesMapping:any[]=[
{id:1, region:"ASIA", name:"India"},
{id:2, region:"ASIA", name:"UAE"},
{id:3, region:"NORTH AMERICA", name:"United States"},
{id:4, region:"NORTH AMERICA", name:"Canada"},
{id:5, region:"SOUTH AMERICA", name:"Mexico"},
{id:6, region:"EUROPE", name:"Germany"}
]
updateSecondDropdown(event){
this.countries=[];
let selectedRegions = event.values;
let selectedRegionNames = selectedRegions.map(o => o.name);
selectedRegionNames.forEach((region) => {
this.countriesMapping.forEach((country, index) => {
if(country.region===region)
this.countries.push(this.countriesMapping[index]);
});
});
}
我使用的PrimeNg版本:8.0.0
您的 updateSecondDropdown
功能有几个问题。基本上,您可以将其更改为以下代码:
updateSecondDropdown(event) {
const selectedRegions = event.value;
this.countries = this.countriesMapping.filter((country) => selectedRegions.includes(country.region));
}
问题是:
event
参数上的 select 离子列表在 event
成员中,而不是 events
。
- 无需使用
o => o.name
映射到 selected 区域列表,因为您已经获得了名称列表。
最后说明:
这不完全是错误,而是提示。只要有可能,请为作业使用适当的数组函数。它将使您的代码更加简单易读。如果您需要 select 项目列表中的某些项目,请使用 filter
函数。如果您需要检查某个项目是否存在于项目列表中,请使用 includes
函数。
forEach
函数对许多任务都很有用,但并不总是正确的工具。
注意其他功能:
some
检查列表中是否至少有一项符合条件,returns boolean
every
检查所有项目是否最不符合条件,returns 布尔值
还有其他一些,我建议您仔细阅读它们,将它们牢记在心,这样您就会知道在需要时寻找它们。
这解决了我的问题
updateSecondDropdown(event) {
const selectedRegions = event.value; this.countries =
this.countries = this.countriesMapping.filter((country) => {
return selectedRegions.some(region => region.name===country.region)
});
}
我有两个 multiselect 下拉菜单,如下所示。如果我选择
- 第一个下拉菜单:“ASIA”,然后第二个下拉菜单应填充值:“India”和“UAE”
- 第一个下拉菜单:“亚洲”和“欧洲”,然后第二个下拉菜单应填充值:“印度”、“阿联酋”和“德国”
我已经尝试了下面的代码,当我首先 select 值形式时,值没有填充在第二个下拉列表中。第二个下拉菜单总是空的。
第一个多select下拉列表:-
<p-multiSelect (onChange)="updateSecondDropdown($event)" [options]="regions" [(ngModel)]="regionValues" optionLabel="name" optionValue="name" defaultLabel="Select Regions"></p-multiSelect>
第二个多select下拉菜单:-
<p-multiSelect [options]="countries" [(ngModel)]="countryValues" optionLabel="name" optionValue="name" defaultLabel="Select Countries"></p-multiSelect>
打字稿代码:-
countries:any[]=[];
regions:any[]=[
{id:1, name:"ASIA"},
{id:2, name:"EUROPE"},
{id:3, name:"NORTH AMERICA"},
{id:4, name:"SOUTH AMERICA"},
]
countriesMapping:any[]=[
{id:1, region:"ASIA", name:"India"},
{id:2, region:"ASIA", name:"UAE"},
{id:3, region:"NORTH AMERICA", name:"United States"},
{id:4, region:"NORTH AMERICA", name:"Canada"},
{id:5, region:"SOUTH AMERICA", name:"Mexico"},
{id:6, region:"EUROPE", name:"Germany"}
]
updateSecondDropdown(event){
this.countries=[];
let selectedRegions = event.values;
let selectedRegionNames = selectedRegions.map(o => o.name);
selectedRegionNames.forEach((region) => {
this.countriesMapping.forEach((country, index) => {
if(country.region===region)
this.countries.push(this.countriesMapping[index]);
});
});
}
我使用的PrimeNg版本:8.0.0
您的 updateSecondDropdown
功能有几个问题。基本上,您可以将其更改为以下代码:
updateSecondDropdown(event) {
const selectedRegions = event.value;
this.countries = this.countriesMapping.filter((country) => selectedRegions.includes(country.region));
}
问题是:
event
参数上的 select 离子列表在event
成员中,而不是events
。- 无需使用
o => o.name
映射到 selected 区域列表,因为您已经获得了名称列表。
最后说明:
这不完全是错误,而是提示。只要有可能,请为作业使用适当的数组函数。它将使您的代码更加简单易读。如果您需要 select 项目列表中的某些项目,请使用 filter
函数。如果您需要检查某个项目是否存在于项目列表中,请使用 includes
函数。
forEach
函数对许多任务都很有用,但并不总是正确的工具。
注意其他功能:
some
检查列表中是否至少有一项符合条件,returns booleanevery
检查所有项目是否最不符合条件,returns 布尔值
还有其他一些,我建议您仔细阅读它们,将它们牢记在心,这样您就会知道在需要时寻找它们。
这解决了我的问题
updateSecondDropdown(event) {
const selectedRegions = event.value; this.countries =
this.countries = this.countriesMapping.filter((country) => {
return selectedRegions.some(region => region.name===country.region)
});
}