angular - primeNG 多选下拉列表在删除然后再次动态添加相同的值后保留复选框值

Question

我正在填充关于在另一个下拉列表中选择的值的 primeNG 多选下拉列表。.html 文件中 Dropdown 1 的代码：

<p-multiSelect [options]="destinations" [panelStyle]="{minWidth:'12em'}" [showToggleAll]="false" [filter]="false" (onChange)="ondestinationSelect($event)" defaultLabel="Select Destination(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Destination(s) Selected">
  <ng-template let-destination>
    <span>{{destination.label}}</span>
  </ng-template>
</p-multiSelect>

.ts 文件中下拉列表 1 的代码：

ondestinationSelect(event) {
    let destinationIdArray = <FormArray>this.addteammateform.get('destinationsresponsiblefor');    
    let destinationId = new FormControl();

    if(event.value.length > destinationIdArray.length) {
      this.usermanagementService.get_residences(event.itemValue).subscribe(response => {
        if(response.length > 0) {
          for(let residenceIndex of response) {
            let residencePush = {label : residenceIndex.residence_name, value:{id:residenceIndex.id, destination_id : residenceIndex.destination_id}};
            this.residences.push(residencePush);
          }
        }    
      });
      destinationId.setValue(event.itemValue.id);
      destinationIdArray.push(destinationId);
    }
    else {
      let residenceCount = this.residences.length;
      let deleteResidenceArray : any = [];


      for(let i=residenceCount - 1; i >=0 ; i--) {
        if(this.residences[i].value.destination_id == event.itemValue) {
          this.residences.splice(i, 1)
        }
      }

      let destinationIndex = destinationIdArray.controls.indexOf(event.itemValue.id); 
      destinationIdArray.removeAt(destinationIndex);
    }
  }

.html 文件中下拉列表 2 的代码：

<p-multiSelect [options]="residences" [optionLabel]="label" [showToggleAll]="false" [filter]="false" showHeader="false" defaultLabel="Select Residence(s)" maxSelectedLabels="0" selectedItemsLabel="{0} Residence(s) Selected" [panelStyle]="{minWidth:'12em'}">
  <ng-template let-residence>
    <div style="font-size:14px;float:right;margin-top:4px">{{residence.label}}</div>
  </ng-template>
</p-multiSelect>

下拉菜单也是 primeNG 多选下拉菜单，并在页面加载时预先填充。

1. 勾选下拉菜单 1中的任何选项。它使用与下拉列表 1 对应的值填充下拉列表 2。
2. 勾选下拉菜单 2中的任何选项。它显示选择的“x”项。
3. 现在，从下拉 1中取消选中选项。
4. 下拉列表 2中的值已删除，但选择的“x”项保持不变且未更新。
5. 现在，再次检查下拉列表 1 中的值（与步骤 1 中的值相同）。
6. 下拉列表 2填充了与下拉列表 1对应的 值，但此时值已被检查（在步骤 2 中选择的值）。

下拉 2 中的复选框在删除并再次添加后保留值。提前致谢。

标签： angularprimeng