基于另一个多选下拉列表 PrimeNg，值不会填充到多选下拉列表值中

Question

我有两个 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

Answer 1

您的 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 布尔值

还有其他一些，我建议您仔细阅读它们，将它们牢记在心，这样您就会知道在需要时寻找它们。

Answer 2

这解决了我的问题

updateSecondDropdown(event) { 
   const selectedRegions = event.value; this.countries = 
   this.countries = this.countriesMapping.filter((country) => {
     return selectedRegions.some(region => region.name===country.region)
   }); 
}

基于另一个多选下拉列表 PrimeNg，值不会填充到多选下拉列表值中

Values are not populating in multiselect dropdown values based on another multiselect dropdown PrimeNg

primeng

angular

primeng-dropdowns