angular组件--primeNg的dropdown组件下拉过滤,中文选项过滤

选项过滤涉及到组件的如下几个api:

  1. [filter]="true"
  2. filterBy="label"
  3. filterLocale="ch"

在这里插入图片描述

[filter]是开启选项过滤功能的api,[filterLocale]是给定组件一个国际化,此处我用到的是ch,简体中文。
值得注意的是[filterBy],根据通常使用组件的习惯,以及组件源数据的组织,也就是options的数据结构,根据文档,options的数据结构如下图:
options的数据结构
组件的显示是由optionLabel="name"来控制,也就是显示的上图的name字段。由上图可见,组件源数据并未体现label字段。因此,在最初设置过滤字段的时候,想到的是根据name字段过滤。也就是filterBy=“name”,然后发现并不能正确过滤。
过滤

过滤2

因此,开始看组件的源码,发现组件内部对options重新进行数据结构的调整,增加了一个label字段,如下图:

实际的options的数据结构
而组件的过滤功能,是根据指定的filterBy字段进行过滤
过滤功能的实现
因此,需要将filterBy字段设置为label。过滤功能就能正常进行啦。
过滤结果

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值