时间戳

首页 > 解决方案 > 如何在 primeNg 多选中动态更新 defaultLabel

angular - 如何在 primeNg 多选中动态更新 defaultLabel

问题描述

在 primeNg 多选中，我从 ts 文件中取消选择项目，我可以取消选择，但这不会在输入字段中更新。

someComponent.html

<p-multiSelect [options]="cities1" maxSelectedLabels=0 selectedItemsLabel="{0} 
items selected" [(ngModel)]="selectedCities1"></p-multiSelect>
<div *ngFor="let city in selectedCities1 let i=index">
  <button (click)="delete(i)">{{city}}</button>
</div>

一些组件.ts

delete(i){
//using splice method to remove item from selectedCities1 array
}

问题是当我从下拉列表中选择和取消选择时，我能够看到“1 项已选择”“2 项已选择”等输出，反之亦然。

在此处输入图像描述

但是，当我从删除功能中执行此操作时，我可以取消选择下拉列表，但无法使用“1 项已选择”“2 项已选择”等更新 defaultLabel，反之亦然。

在此处输入图像描述

非常尝试并在所有primeng Q＆A中进行了搜索，但无法找到答案。

标签： angulartypescriptprimengprimeng-datatableprimeng-dropdowns

解决方案

这很奇怪，因为如果使用拼接，应该调用 writeValue。

您可以在删除项目后尝试切片。这将创建一个新数组：

this.selectedCities1 = this.selectedCities1.slice();

但这里有一个黑客：

<p-multiSelect #sel [options]="cities1" maxSelectedLabels=0 selectedItemsLabel="{0} 
items selected" [(ngModel)]="selectedCities1"></p-multiSelect>
<div *ngFor="let city in selectedCities1 let i=index">
  <button (click)="delete(i);sel.updateLabel()">{{city}}</button>
</div>

我希望它有帮助！

推荐阅读