Prime NG: выпадающий поиск по меткам - PullRequest
Новая
       19

Prime NG: выпадающий поиск по меткам

0 голосов
/ 31 октября 2019

У меня проблемы с поиском решения для моего углового проекта, в котором используется простое число ng. Я пытаюсь сделать поиск столбцов по строкам выпадающих значений.

Если я хочу найти все значения '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}
];

Ответы [ 3 ]

0 голосов
/ 01 ноября 2019

Добавьте [filter] = "true" [filterBy] = "'label'" в ваш p-выпадающий список. это будет работать нормально.

0 голосов
/ 02 ноября 2019

ваши данные должны быть типа 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

0 голосов
/ 31 октября 2019

Вы должны использовать свойство optionLabel, например - 

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