Primeng多重选择下拉不一致行为

Question

我有一个primeng多选择下拉列表，它的值是根据从另一个下拉列表中选择的值更改的。

<p-dropdown id="test" name="test" [style]="{'width':'100%'}"
 [(ngModel)]="selectedState" [options]="states" (onChange)="getCities()">
    </p-dropdown>

在选择上面的下拉列表时，会触发一个函数getCities()，它是一个rest端点，用于获取对应城市的状态。城市值被填充到下面的多选择下拉列表中。selectedCities可能包含已经选定的值。因此，如果一个城市列表不包含任何selectedCities，则多选择下拉列表将处于一种奇怪的状态。

<p-multiSelect  id="names" name="names" [style]="{'width':'100%'}"
 [options]="cities" [(ngModel)]="selectedCities" (ngModelChange)="onModelChange()">
</p-multiSelect>

提前谢谢。

​

Answer 1

问题是您覆盖了selectedCities，但希望保留以前的selectedCities。selectedCities需要保存最新的cities +先前的选择。让我们根据需要更新selectedCities。

如果没有看到getCities()，就很难知道发生了什么，但我猜它还会返回城市的data。我们刷新cities，只给它当前的selection.We，使用concat将两个数组selectedCities和新data一起添加起来。我们使用扩展...来更新数组并触发模板更新。我们使用新的集合，以确保我们不会在城市中添加副本。

getCities() {
this.cities = this.selectedCities;
this.cities = [...new Set(this.cities.concat(data))];
}

onSelectDeselectCity(event: any) {
if (this.selectedCities.includes(event.value) { // remove
    this.selectedCities.splice(this.selectedCities.indexOf(event.value), 1);
} else {
    this.selectedCities.push(event.value) // add
  }
}

<p-multiSelect  id="names" name="names" [style]="{'width':'100%'}"
 [options]="cities" [(ngModel)]="selectedCities" (ngModelChange)="onSelectDeselectCity($event)">
</p-multiSelect>