2

我正在尝试向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 ("

任何建议都会很棒！

4

2 回答 2

2

截至目前，树表中没有过滤器功能在 GitHub 配置文件上有问题注册，并将很快实施，您可以在此处查看状态

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

你可以使用普通的 ng-repat 来显示表格，你可以在上面使用过滤器选项，否则你需要等到这个功能上线。

于 2018-02-11T05:39:36.650 回答
0

这基本上意味着您没有定义您的 pipe filter。要创建管道，请运行以下命令：$ 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);
    }
}
于 2018-02-11T01:19:43.640 回答