在数据网格中搜索

Question

我正在使用清晰度数据网格，我希望能够根据搜索过滤器过滤整个网格内容。

我试图创建一个管道。管道包含在 app.module 内。管道在第一次加载组件时被调用（并且什么都不应该发生），但由于某种原因，当我将一些东西放入我的时，什么也没有发生。没有调用 'userFilter' 管道。

user.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>
...

search.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)] 而不是！

Answer 1

我记得几个月前写了一个 plunker 来展示这个：https://plnkr.co/edit/59FZKya2Soa7Ofnlge3B?p=preview

根据您的描述，这正是您想要的。您不应该像现在在迭代器中那样使用管道，因为它会强制 Angular 为每次更改检测重新计算它们，这太重了。因此，推荐的解决方案是坚持使用 *clrDgItems="let user of users"，并将 users 属性本身设置为过滤后的数组，这样您只在用户键入内容时才重新计算过滤结果。

在数据网格中搜索

Searching within datagrid

angular

vmware-clarity