1

Angular Material パッケージを使用してマット テーブルを再作成しようとしました。マットテーブルの例は最近大幅に改善されました。これは驚くべきことです。この例では、並べ替え機能とフィルター機能の両方を提供しています。

ここで、stackblitz の最小限の例でダミー データを使用して、自分のアプリのコンテキスト内でこれを再現しようとしました。

テーブルが表示され、データが取り込まれますが、複数の文字を入力するとすぐに、フィルター メソッドがすべてのエントリを誤って削除しているように見えます。

ここで考えられる違いの 1 つは、私の例では、 dataSource: の宣言でクラスを使用しているのdataSource: MatTableDataSource<Match>;に対し、Angular の人々によって提供された例では、それは interface: であるということですdataSource: MatTableDataSource<UserData>;。

ただし、代わりにインターフェースで遊んでみましたが、成功しませんでした。ここで何か助けていただければ幸いです。

4

4 に答える 4

3

Normally, the filter works by serializing the first level data of the object to a string then doing a quick check for string inclusion. This does not work for deep objects. So you can't rely on default filtering and need to provide a filterPredicate.

In the documents it says

To override the default filtering behavior, a custom filterPredicate function can be set which takes a data object and filter string and returns true if the data object is considered a match.

Example that filters only by location:

    this.dataSource.filterPredicate = (match: Match, filter: string) => {
      return match.matchDeets.location.toLowerCase().includes(filter);
    };
于 2019-09-07T23:59:22.463 に答える