时间戳

首页 > 解决方案 > 仅用一个材料表组件处理不同的数据源

angular - 仅用一个材料表组件处理不同的数据源

问题描述

我目前正在使用 Angular 来构建我的网站 - 熟悉 Angular 只是进行一些测试。

目前我被困在如何正确显示数据......我安装了材料，我正在使用材料表。我可以通过我创建的材料表显示一个来源的数据。

为此，我创建了两个组件：一个组件包含用于创建新数据条目的表单，第二个组件包含表格。现在我想创建第三个组件（又是另一个表单），它应该使用相同的材​​料表组件显示数据，但来自另一个服务的另一个 API 调用，而不是第一个表单组件。

是否可以仅使用一个材料表组件和表的 dataSource 属性来处理不同的 API 调用，或者我是否必须为每个表单组件创建一个表组件？我不认为这是这样做的方法

不幸的是，我没有开始的方法，所以我无法向您展示我已经尝试过的内容......如果有人告诉我如何处理这种情况的最佳实践，我将不胜感激。

提前致谢

标签： angulartypescript

解决方案

当然。使用材料表或任何其他组件都没有关系。我会分享一般的想法，我想这就足够了。

我想你有source包含数据的属性，它绑定到材料表有点像这样：

<mat-table [source]='source"></mat-table>

当组件正在初始化时，您可以放置​​一个逻辑来根据某些参数选择要用作源的内容。我可以想象它可能是一个查询参数或路由参数。带有查询参数的示例：

export class MyComponent implements OnInit {
   source$: Observable<MyData[]>();

   constructor(private service1, private service2, activatedRoute: ActivatedRoute) {
   }

   ngOnInit() {
        this.source$ = this.activatedRoute.queryParams.pipe(
            pluck(QueryParamNames.dataSourceType),
            distinctUntilChanged(),
            map(async (dataSourceType: DataSourceType) => {
                if (dataSourceType === DataSourceType.one) {
                    return this.service1.getData();
                } else {
                    return this.service2.getData();
                }
            }),
        );
   }
}

<mat-table [source]='source$ | async"></mat-table>

我还利用async管道来避免订阅和内存泄漏的喧嚣。async管道非常适合它。

推荐阅读