如何使用p-listbox在多个标签中进行过滤？

Question

我希望能够在多个标签上进行筛选，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>

我想按代码和名称进行筛选。

- Saad Doublali

Answer 1

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

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">

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

- Ed Hickey

---

你的建议解决了问题，尽管我觉得这样做有些取巧。在我的情况下，我不得不在对象中创建一个新属性，将所有其他属性合并为一个，并将这个新属性用作选项标签。如果primeng允许指定多个可过滤列或使用用户可以自行过滤的函数，那将是很好的。但是，非常感谢您的帮助！ - vk-code

Answer 2

我通过使用一个包含*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;
}

- ratbeard

Answer 3

是的。已经在p-listbox中有多个属性了，只需添加到p-listbox中即可

multiple=true

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

- Arun Kumar

---

谢谢您的回答，但我不想要多选，我想在多个标签上进行过滤，类似于 optionLabel="名称 || 代码"。 - Saad Doublali