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

时间:2018-02-11 01:05:52

标签: angular primeng 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 个答案:

答案 0 :(得分:2)

截至目前,树表中没有过滤功能 GitHub配置文件中有问题注册,很快就会实现,您可以检查状态here

所以基本上你试图在primeNG属性上使用过滤器,这显然会引发错误。因为该属性过滤器不是已知属性。

你可以使用普通的ng-repat显示表格,你可以使用过滤器选项,否则你需要等到这个功能生效。

答案 1 :(得分:0)

这意味着您没有定义管道过滤器。 要创建管道,请运行以下命令:var q = [ ['NFR', 'Reusability'], ['NFR', 'Robustness'], ['FR', 'Reporting Requirements'], ['FR', 'Historical Data'] ]; var correct = 0; var incorrect = 0; var total = q.length; var i = 0; document.getElementById('nick').innerText = name; document.getElementById('question').innerText = q[0][1]; var nfr = document.getElementById('non-functional'); var fr = document.getElementById('functional'); function callback(ans) { if (q[i][0] === ans) { correct++; } else { incorrect++; }; if (i < q.length - 1) { i++; document.getElementById('question').innerText = q[i][1]; } else { location.href = "answer.html"; } } nfr.addEventListener('click', callback('NFR')); fr.addEventListener('click', callback('FR')); 如果要进行基本过滤,请将此代码添加到生成的管道中:

$ ng g pipe filter