时间戳

首页 > 解决方案 > 如何使用 p-listbox 过滤多个标签？

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

问题描述

我想过滤多个标签，有没有一种方法可以让 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>

我想过滤代码和名称

标签： angularfilterlistboxprimeng

解决方案

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

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

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

推荐阅读