Question

我正在相对于另一个下拉列表中选择的值填充primeNG multiselect下拉列表。 .html文件中的下拉菜单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);
    }
  }

.p文件中

下拉菜单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 multiseltect下拉菜单，并且在加载页面时预先填充。

在下拉列表1 中选中所有选项。它会填充下拉菜单2 其值对应于下拉列表1 。
取消所有选项在下拉菜单2 中。它显示选中的“ x”项。
现在，取消选中下拉菜单1 中的选项。
下拉列表2 中的值已删除，但“ x”项所选内容保持不变，并且不会更新。
现在，再次检查下拉菜单1中的值（与步骤1）。
下拉列表2 填充了与下拉列表1 相对应的值，但是这次已经检查了值（在步骤2中选择的值）。

下拉菜单2中的

复选框在删除并再次添加后保留值。预先感谢。

primeNG多选下拉菜单在删除后会保留复选框值，然后再次动态添加相同的值

0 个答案: