如何使用 p-listbox 过滤多个标签？

Posted 2023-02-27

【中文标题】如何使用 p-listbox 过滤多个标签？

【英文标题】：How to filter in multiple labels with p-listbox?

【发布时间】：2019-10-04 13:53:54

【问题描述】：

我想过滤多个标签，有没有一种方法可以让 optionLabel 有多个选项？

<p-listbox [options]="sites" `enter code here`[(ngModel)]="selectedSite" class="ui-fluid" [listStyle]="'max-height':'300px'" filter="filter" optionLabel="name">

              <p-header>
                <strong> 'select-site.choose' | translate</strong>
              </p-header>
              <ng-template let-site pTemplate="item">
                <span>site.value.code - site.value.name</span>
              </ng-template>
</p-listbox>

我想过滤代码和名称

【参考方案1】：

是的。 Prime ng 在 p-listbox 中已经有多个属性。只需添加 p-listbox

multiple=true

https://www.primefaces.org/primeng/#/listbox参考属性部分

【讨论】：

感谢您的回答，但我不想多选，我想过滤多个标签，例如 optionLabel="name || code"

【参考方案2】：

不要将选项设置为任意对象数组，而是将其设置为选择项数组，其标签包含要过滤的两个值。

siteOptions: SelectItem[] = sites.map(s =>  value: s, label: s.name + s.code );

更新您的列表框元素：

<p-listbox [options]="siteOptions" [(ngModel)]="selectedSite" class="ui-fluid" [listStyle]="'max-height':'300px'" filter="filter">

您已经在使用项目模板来控制列表中每个元素的显示方式，因此可能不需要进行其他更改。

【讨论】：

您的建议确实解决了问题，尽管我觉得它很老套。在我的例子中，我必须在对象中创建一个新属性，我只是将所有其他属性组合成一个，并将这个新属性用作 optionLabel。如果primeng 允许指定多个可过滤列或采用用户可以根据需要进行过滤的功能，那就太好了。不过谢谢这对我有帮助！

【参考方案3】：

我通过使用包含 *ngIf 的项目模板解决了这个问题，该模板调用了我的过滤函数，然后使用 css 规则隐藏列表中的空白项目。

 <p-listbox [options]="items" [(ngModel)]="selected"
  >
    <ng-template let-item pTemplate="item">
      <div *ngIf="isVisible(item.value)">
        item.value
      </div>
    </ng-template>
  </p-listbox>

isVisible(item) 
    if (item.fizzy) 
      return true
    
    // any other filtering logic

/* Hacky way to hide filtered items */
:host ::ng-deep .ui-listbox-item:empty 
  display: none !important;