如何使用 ngrx 過濾有角度的材料表？

Question

我正在使用 angular 4 + angular material + ngrx 和動作/效果/減速器。 我的客戶數據存儲中有一個數組（姓名、地址、美國州）。

在我的組件中，我有一個包含所有客戶的 mat-table 和一個包含 50 個狀態的下拉列表。 我在我的組件 HTML 中使用異步管道，並且完整的客戶列表顯示完美。

現在，當用戶選擇一個狀態時，我想過濾表並僅顯示處於該狀態的客戶，而無需返回服務器，因為我已經擁有商店中的所有客戶。

這方面的最佳實踐設計模式是什么？ 可以在不影響 store 的情況下過濾組件中的 table 嗎？ 這甚至可能嗎？

或者我是否需要分派一個動作並在減速器中進行過濾？ 如果這是我想象的最佳方法，我將不得不在商店中保留 2 個數組：一個包含所有客戶，另一個是過濾后的數組，我將綁定到該組件。 這看起來更清晰，更符合模式，但需要復制潛在的大量客戶數據。

感謝推薦方法或類似解決方案的一些示例代碼（或鏈接）。

謝謝

Answer 1

在 HTML 中選擇下拉調用applyFilter函數時，將component中的applyFilter定義為：

applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
}

在ngOnInit()添加謂詞以自定義您的過濾器：

ngOnInit() {
    this.getCustomers().subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
    });

    this.dataSource.filterPredicate = function(data, filter): boolean {
      return data.state.toLowerCase() == filter;
    };
}

HTML

<mat-table [dataSource]="dataSource">

您還可以在此處找到示例。

Answer 2

將所有客戶存儲在 ngrx store 中並不是一個好主意，尤其是客戶、訂單、產品等數據可能會快速增長，因此可能會導致在功能中加載大量數據。

我更喜歡在網格組件中使用直接 http 服務，尤其是當實現了像服務器端過濾/排序/分頁這樣的想法時（例如，通過 http 服務然后通過商店直接將Kendo Grid與 OData 結合起來更容易）。

如果您必須從網格共享數據，您的組件可以分派GridDataLoaded({ items: items}) ，然后其他人可以通過選擇器使用日期。