我正在使用清晰度数据网格,我希望能够根据搜索过滤器过滤整个网格内容。
我试图创建一个管道。该管道包含在 app.module 中。管道在第一次加载组件时被调用(并且什么都不应该发生),但由于某种原因,当我将一些东西放入我的时,什么也没有发生。不调用“userFilter”管道。
用户.component.html
<input type="text" id="search" placeholder="Search..." ([ngModel])="searchTerm">
...
<clr-dg-row *clrDgItems="let user of users | userFilter: searchTerm" [clrDgItem]="user" (click)="backupSelectedUser(user)">
<clr-dg-cell>{{ user.username }}</clr-dg-cell>
<clr-dg-cell>{{ user.name }}</clr-dg-cell>
<clr-dg-cell>{{ user.firstName }}</clr-dg-cell>
</clr-dg-row>
...
搜索.pipe.ts
transform(items: any, term: any): any {
if (term === undefined) {
return items;
}
return items.filter(function (item) {
for (const property in item) {
if (item[property] === null) {
continue;
}
if (item[property].toString().toLowerCase().includes(term.toLowerCase())) {
return true;
}
}
return false;
});
}
更新:我在 ngModel 上打了一点错字。它应该是 [(ngModel)] 而不是!
最佳答案
我记得几个月前写了一个 plunker 来展示这个:https://plnkr.co/edit/59FZKya2Soa7Ofnlge3B?p=preview
根据您的描述,这正是您想要的。你不应该像现在在迭代器中那样使用管道,因为它会强制 Angular 为每次更改检测重新计算它们,这太重了。因此,推荐的解决方案是坚持使用 *clrDgItems="let user of users"
,并将 users
属性本身设置为过滤后的数组,这样您只需重新计算用户输入内容时的过滤结果。
关于angular - 在数据网格中搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47744518/