如何同时过滤mat表数据源和相关的异步属性？

Question

设置：角9.1.7，角材料9.2.3，macOS 10.14.6，ngrx存储/ngrx-data/ngrx-实体9.1.2

形势：

我有一个功能良好的工作材料表，其数据源类型为MatTableDataSource，它是从ngrx提供的异步HTTP请求中获得的。我可以使用内置的数据源筛选函数过滤资源本身的所有属性。

问题：

在我的Material组件中，我没有显示所有的资源属性，一些列显示了为特定资源属性异步加载的相关数据，例如：{{(element.orderId | orderContactProperty: 'email') | async}} --资源(元素)具有一个orderId属性，并且我还从同一台服务器加载订单和联系人，当某个时候，通过管道加载该资源顺序的联系人，并显示该资源的属性('email')。现在，这显然不属于Resource类型的数据源，而是稍后加载的，这意味着它不能被过滤。

筛选这些不属于原始数据源的延迟加载属性的最佳/最简单解决方案是什么？基本上，我如何过滤客户在表中看到的内容？

什么能起作用？：

我查看了席台-出口商扩展，因为只有可见表数据被导出，我的想法是提取包含所有可见数据的行，然后过滤，然后只使用过滤过的元素更新数据源，但这似乎是一种黑客式的解决方法，对吗？

此外，我还考虑了“扩展”数据源，在显示相关属性并将其添加到相应的行之前，以便将它们添加到相应的行中，这样做不也是个问题吗?因为类型Resource不再正确，稍后当我想编辑/更新资源并将它们保存到服务器时，我会有不想要的属性吗？

但是，在把我的时间花在这些想法上之前，有没有人有一个建议/方向来最好地解决这个问题？我当然不是第一个偶然发现这个问题的人，但是我找不到任何其他的问题来描述这种情况。

不幸的是，由于它的复杂性，我无法提供stackblitz，而且它是一个客户端项目，但是我希望这个屏幕快照有助于说明我的问题：(红色星号的意思是:不在数据源中，不能被过滤，其他的都能正常工作)

​

​

Answer 1

我遇到了完全相同的情况，我惊讶地没有找到一个适合异步过滤数据的解决方案。由于filterPredicate期望布尔值作为返回类型，因此不可能以干净的方式将存储选择器中的可观察到的数据合并到数据源。

因此，我决定在本地缓存存储区中的数据(在我的例子中是用户名)，并扩展默认的角材料filterPredicate。

这只起作用，因为我已经在实际显示表之前加载了数据，这限制了这种方法的用例。

filterPredicate: ((data: Data, filter: string) => boolean) = (data: Data, filter: string): boolean => {

    // default angular material filter predicate
    const dataStr = Object.keys(data).reduce((currentTerm: string, key: string) => 
    {
      return currentTerm + (data as {[key: string]: any})[key] + '◬';
    }, '').toLowerCase();

    // Transform the filter by converting it to lowercase and removing whitespace.
    const transformedFilter = filter.trim().toLowerCase();

    const defaultResult = dataStr.indexOf(transformedFilter) !== -1;

    // no need to continue searching after a match
    if (defaultResult) {
      return true;
    }

    // no match found yet, check usernames for matches
    const userIds = this.getUserIds(transformedFilter);
    return userIds.includes(data.userId);

}

然后，可以将此函数分配给数据源的filterPredicate，如https://material.angular.io/components/table/overview#filtering中所述。

this.dataSource.filterPredicate = this.filterPredicate;

我知道这也不是一个干净的解决方案，但对于我的场景来说已经足够了。任何更好的方法都是欢迎的！