如何使用 ngrx 过滤角材料表？答案

【问题标题】：How do I filter an angular material table using ngrx?如何使用 ngrx 过滤角材料表？
【发布时间】：2018-04-03 04:32:42
【问题描述】：

我正在使用 angular 4 + angular material + ngrx 和动作/效果/减速器。我的客户数据存储中有一个数组（姓名、地址、美国州）。

在我的组件中，我有一个包含所有客户的垫表和一个包含 50 个状态的下拉列表。我在组件 HTML 中使用异步管道，并且完整的客户列表完美显示。

现在，当用户选择一个状态时，我想过滤表格并仅显示处于该状态的客户而不返回服务器，因为我已经拥有商店中的所有客户。

对此的最佳实践设计模式是什么？我可以在不影响商店的情况下过滤组件中的表格吗？这甚至可能吗？

或者我是否需要调度一个动作并在减速器中进行过滤？如果这是最好的方法，我想我将不得不在商店中保留 2 个数组：一个包含所有客户，一个是过滤后的数组，我将绑定到组件。这看起来更简洁，更符合模式，但需要复制大量潜在的客户数据。

感谢推荐方法或类似解决方案的一些示例代码（或链接）。

谢谢

【问题讨论】：

你能分享你的来源吗？
如果您使用的是 Material 表，则无需维护两个数组，material 会为您完成。您可以只为数据源提供过滤器。看看我的回答。
看到这个，stackoverflow.com/questions/48769015/…

标签： angular filter angular-material ngrx

【解决方案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">

您还可以找到示例here。

【讨论】：

【解决方案2】：

将所有客户存储在 ngrx 商店中并不是一个好主意，尤其是客户、订单、产品等数据可能会快速增长，因此可能会导致在功能中加载大量数据。

我更喜欢在网格组件中使用直接 http 服务，尤其是当通过服务器端实现过滤/排序/分页之类的想法时（例如，通过 http 服务直接将 Kendo Grid 与 OData 结合起来，然后通过存储更容易）。

如果您必须共享网格中的数据，您的组件可以调度类似GridDataLoaded({ items: items}) 的操作，然后其他人可以通过选择器使用日期。

【讨论】：