Как добавить функцию фильтра в primeng treetable

Я пытаюсь добавить функцию фильтра в primeng treetable. Следующий код показывает мою текущую ситуацию.

<div class="content-section introduction">
    <div>
        <span class="feature-title">Katerra</span>
        <span>Cost Master</span>
    </div>
</div>

<div class="content-section implementation">
    <p-growl [value]="msgs"></p-growl>

<input [(ngModel)]="searchText" placeholder="search text goes here">
<p-treeTable [value]="files6 | filter:searchText" selectionMode="single" [(selection)]="selectedFile2" [style]="{'margin-top':'50px'}" [contextMenu]="cm">
    <p-header>Context Menu</p-header>
    <p-column field="name" header="Division"></p-column>
    <p-column field="size" header="Code"></p-column>
</p-treeTable>
<p-contextMenu #cm [model]="items"></p-contextMenu>

Как видите, я пытаюсь добавить

<input [(ngModel)]="searchText" placeholder="search text goes here">

а также использовать [value]="files6 | filter:searchText", Код успешно скомпилирован, но в консоли Chrome напечатана ошибка.

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'filter' could not be found ("

<input [(ngModel)]="searchText" placeholder="search text goes here">
<p-treeTable [ERROR ->][value]="files6 | filter:searchText" selectionMode="single" [(selection)]="selectedFile2" [style]="{'"): ng:///TreeTableDemoModule/TreeTableDemo.html@11:13
Error: Template parse errors:
The pipe 'filter' could not be found ("

Любые предложения будут великолепны!

2 ответа

Решение

На данный момент в древовидной таблице нет функции фильтра, есть реестр проблем в профиле GitHub, и скоро он будет реализован, вы можете проверить статус здесь

так что в основном вы пытаетесь использовать фильтр по атрибуту primeNG, который, очевидно, выдаст ошибку. потому что для этого атрибута фильтр не является известным свойством.

вы можете использовать обычный ng-repat для отображения таблицы, и вы можете использовать опцию фильтра для этого, иначе вам нужно подождать, пока эта функциональность активна.

В основном это означает, что вы не определили свой трубофильтр. Чтобы создать канал, выполните следующую команду: $ ng g pipe filter Теперь добавьте этот код в ваш сгенерированный канал, если вы хотите сделать базовый фильтр:

// I am unsure of the name of the generated pipe change it if needed 
export class FilterPipe implements PipeTransform {
    transform(items: any[], searchText: string): any {
        return items.filter(item => item.indexOf(searchText) !== -1);
    }
}
Другие вопросы по тегам