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

【问题标题】：How to filter in multiple labels with p-listbox?如何使用 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>

我想过滤代码和名称

【问题讨论】：

标签： angular filter listbox primeng

【解决方案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;
}

【讨论】：