4

私は明確なデータグリッドを使用しており、検索フィルターに基づいてグリッドコンテンツ全体をフィルタリングできるようにしたいと考えています。

パイプを作ってみました。パイプは app.module 内に含まれています。コンポーネントが最初にロードされたときにパイプが呼び出されます (何も起こらないはずです) が、何らかの理由で、何かを my に入れても何も起こりません。「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)] であるべきです!

4

1 に答える 1

2

数か月前にこれを正確に示すプランカーを書いたことを覚えています: https://plnkr.co/edit/59FZKya2Soa7Ofnlge3B?p=preview

あなたが説明したことに基づいて、これはまさにあなたが望むものです。イテレータで現在行っているようにパイプを使用しないでください。これは、変更を検出するたびに Angular にパイプを再計算させるため、重すぎるためです。したがって、推奨される解決策は、 に固執し*clrDgItems="let user of users"、usersプロパティ自体をフィルター処理された配列に設定して、ユーザーが何かを入力したときにのみフィルター結果を再計算することです。

于 2017-12-11T17:05:26.133 に答える