0

我无法为使用 prime ng 的 Angular 项目找出解决方案。我正在尝试对下拉值的行进行列搜索。

如果我想查找所有“Jan”值，则找不到数据。但是，如果我搜索“1”，它可以找到所有一月份的值。看起来它搜索值而不是标签。我如何使用标签来搜索它？

这是代码：

**HTML:**
<p-table #tt [value]="data" ....>

<input pInputText type="text" class="colmsearch"
placeholder="Search" 
(input)="tt.filter($event.target.value, 'month', 'contains')">

.
.
.
<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'"
[options]="monthLabels"></p-dropdown>

</p-table>

**TS:**
this.data = [
    {id: 03, name: 'First', month: 1},
    {id: 04, name: 'Second', month: 2},
    {id: 05, name: 'Third', month: 1},
    .
    .
    {id: 07, name: 'Fourth', month: 3}

];

this.monthLabels = [
    {label: "Jan", value: 1},
    {label: "Feb", value: 2},
    {label: "Mar", value: 3},
    .
    .
    {label: "Dec", value: 12}
];
4

3 回答 3

1

将[filter]="true" [filterBy]="'label'"添加到您的 p-dropdown。它会正常工作。

于 2019-11-01T11:11:59.053 回答
0

您必须使用属性optionLabel，例如 -

<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'" optionLabel="label"
[options]="monthLabels"></p-dropdown>
于 2019-10-31T18:01:29.397 回答
0

您的数据需要是 SelectItem 类型

import {SelectItem } from 'primeng/api';

零件：

monthLabels : SelectItem[];
 this.monthLabels = data.map(item =>
          ({
            label: item.name,
            value: item.id
          }));
      }

模板

<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'"
[options]="monthLabels" [filter]="true" ></p-dropdown>

有一个很好的例子 https://stackblitz.com/edit/primeng-dropdown

于 2019-11-01T21:05:14.233 回答