Question

我正在使用primeng multiselect进行具有搜索功能的多选下拉菜单。在正常情况下，一切工作正常，但是现在我有与每个选项相关联的按钮。单击按钮后，我要从选择列表中选择相应的选项，它也应该更新标签。

HTML代码

<div class="col-md-3">
    <p-multiSelect [options]="bins" defaultLabel="Select Bins" [(ngModel)]="selectedBins" (onChange)="binSelect($event)"></p-multiSelect>
    <p>Selected Bins: {{selectedBins}}</p>
</div>
<button (click)="clicked('bin1')">Bin 1</button>
<button (click)="clicked('bin2')">Bin 2</button>

组件

interface ObjBinMultiSelect {
  name: string,
  code: string
}

export class Test implements OnInit{

  bins: SelectItem[];
  selectedBins: ObjBinMultiSelect[] = [];

  //Pushing the data on service call success using forEach
  //below list is just for reference

  bins.push({ label: "bin1", value: "bin1" });
  bins.push({ label: "bin2", value: "bin2" });

  clicked(val) {
      this.selectedBins.push(val);
  }
}

在clicked功能上，我可以选中尊重价值的复选框，但不能更新标签。我也不确定是否推值是正确的方法。如何实现这一目标，以及这是否是正确的方法？

Answer 1

这很奇怪。自定义表单字段的核心实现似乎存在一些问题。调查发现ngModel值引用更改仅更新了值primeng多选。作为解决方法，您可以考虑在下面使用。如果我有更多时间，我将尝试查找primeng多选实现的确切问题。

clicked(val) {
    let oldSelected = [...this.selectedBins];
    // Before pushing value, make sure its unique.
    oldSelected.push(val);
    this.selectedBins = oldSelected
}

Working Demo

在单击按钮时选择PrimeNg multiselect选项，角度

1 个答案: