我正在使用Prime NG多选组件,并且希望在选中3个以上复选框时显示selectedItemsLabel="{0} Selected”,但如果选中了所有复选框,则应在占位符中显示selectedItemsLabel=“All”。
我是Angular 的新手,我一直在关注这个MultiSelect组件的文档,但它没有显示能够实现属性的多个条件的选项,我想知道这是否可能。
可能的示例
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect
[ngModel]="value"
[options]="routeOptions"
placeholder="Any"
(onChange)="filter($event.value)"
optionLabel="name"
selectedItemsLabel="{0} selected"
[maxSelectedLabels]="3"
>
<ng-template let-option pTemplate="item">
<div>
<span class="p-ml-1">{{ option.name }}</span>
</div>
<div *ngIf="[maxSelectedLabels="routeOptions.length - 1"] Then selectedItemsLabel="All"></div>
</ng-template>
</p-multiSelect>
</ng-template>
2条答案
按热度按时间rdlzhqv91#
可以。首先用**#**为组件指定一个ref,如下所示:
然后您就可以访问它:
如果
maxSelectedLables
的选项是routeOptions的length-1,则div
可见。这就是ngIf的工作原理但是
这不是你想要的。你想要设置
selectedItemsLabel
属性。你没有正确理解它。你设置maxSelectedLables
为3作为例子和直接设置selectedItemsLabel
,太!selectedItemsLabel
的文本将只在需要时显示(由组件控制)。快看斯塔克 lightning 战!
ng-prime
的documentation也会有所帮助,它会说:更新日期:2023年2月18日
你想显示"ALL"只有当所有的项目被选中。所以添加
onChange
事件和bindselectedItemsLabel。为什么绑定?它有一些问题,其中的一个条件。所以我们把它放在代码中。在代码中,对
onChange
执行以下操作:现在一切都如你所愿了。重要的是:我们使用
changeRef.detectChanges();
没有这个组件选定的文本将不会直接更改。导入到组件构造函数:8yoxcaq72#
我对这个问题做了一个堆栈 lightning 战:https://stackblitz.com/edit/primeng-tablefilter-demo-ipt7y1?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
如果你注意到,清除按钮不再清除选中的文本框。经过一些测试,似乎[(ngModel)]打破了它,我认为它与双向绑定有关?它没有显示在stackblitz中,但如果你包括
清除按钮仍然**从表格中清除过滤器,**但不在选定的文本框中。
我发现有一处房产
这在文本框的末尾添加了一个X,将其清除。可悲的是,样式/定位不是我所需要的。
有什么方法可以修复清除按钮?添加一个ts函数来清除选中的值?如果是这样,如何将其绑定到清除按钮,因为它是从
menu属性,我没有运气找到尝试向该按钮添加/更改功能的方法。