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

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

我有两个 multiselect 下拉菜单,如下所示。如果我选择

我已经尝试了下面的代码,当我首先 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));
}

问题是:

  1. event 参数上的 select 离子列表在 event 成员中,而不是 events
  2. 无需使用 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)
   }); 
}