javascript - Angular Material Table 不会在初始加载时填充外部数据

Question

我正在处理一个 Angular 6 项目，我正在通过 Observable 将 AWS DynamoDB 表中的数据加载到 Material Table 组件中。我使用 angular-cli 生成表的初始结构，然后添加我自己的服务来获取外部数据，因为该示例使用数组中的硬编码数据。

一切似乎都在工作(我可以看到通过 console.log 返回的正确数据)除了在我的初始加载时，我从 observable 返回的数据没有填充到表中。事实上，如果我检查“this.data”变量，它似乎立即被设置回“undefined”。如果我在分页组件上选择并更改每页的结果数，则会插入由 observable 返回的数据。

connect(): Observable<DynamoTableItem[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
        observableOf(this.data),
        this.paginator.page,
        this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
        return this.getPagedData(this.getSortedData([...this.data]));
    }));
}

如果有人不介意看的话，我已经把这个项目放到了 stackblitz 上。

重现问题:

1. 转到:https://stackblitz.com/edit/mat-table-dynamo
2. 注意表中没有数据。
3. 选择“每页项目数”下拉菜单并更改为不同的值。
4. 该表使用从 Observable 返回的数据填充。

感谢您的帮助!

Answer 1

用 Angular 编写任何服务的经验法则是，如果你的服务中有 .subscribe()，你可能(99%)做错了。始终返回一个Observable，并让您的组件执行.subscribe()。

您的代码不起作用的原因是因为您首先在服务中订阅数据，然后使用 Observable.of() 重新包装它。那行不通，因为您的 http 调用是异步的。当您的构造函数中的订阅收到发射时，您的 connect 早已建立并且 this.data 在可以分配任何值之前首先是未定义的。

要解决您的问题，只需将 of(this.data) 更改为其原始的 Observable 源，一切正常:

connect(): Observable<DynamoTableItem[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
        this.dynamoService.getData(this.params),
        this.paginator.page,
        this.sort.sortChange
    ];

    // Set the paginators length 
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map((received) => { 
        return this.getPagedData(this.getSortedData([...received]));
    }));
}

这是工作 working StackBlitz