如何在primeng treetable中添加过滤功能

Question

我正在尝试向 primeng 树表添加过滤功能。下面的代码展示了我目前的情况。

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

有什么建议就太好了！

Answer 1

这基本上意味着您没有定义管道 过滤器。要创建管道运行，请使用以下命令：$ 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);
    }
}

Answer 2

截至目前，树中没有过滤器功能 table GitHub 配置文件上有问题注册，将很快实施你可以检查状态 here

所以基本上您是在尝试对 primeNG 属性使用过滤器，这显然会引发错误。因为该属性过滤器未知属性。

您可以使用普通的 ng-repat 来显示 table 并且您可以在其上使用过滤器选项，否则您需要等到此功能上线。

如何在primeng treetable中添加过滤功能

how to add filter function in primeng treetable

primeng

angular

primeng-treetable