Question

我正在使用角度4 +角度材质+ ngrx与动作/效果/缩小器。我的客户数据存储中有一个数组（名称，地址，美国州）。

在我的组件中，我有一个所有客户的mat-table和50个州的下拉列表。我在组件HTML中使用异步管道，完整的客户列表显示。

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

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

或者我是否需要调度动作并在减速器中进行过滤？如果这是最好的方法，我想我必须在商店中保留2个数组：一个包含所有客户，一个将是我将绑定到组件的过滤数组。这似乎更清晰，更符合模式，但需要复制可能大量的客户数据。

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

由于

Answer 1

在HTML中选择下拉列表调用applyFilter功能时，请在applyFilter中将component定义为：

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

<{1>}在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。

Answer 2

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

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

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

如何使用ngrx过滤角度材质表？

2 个答案: