角度材料表不会在初始加载时填充外部数据

Question

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

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

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]));
}));
}

我已经把这个项目放在堆栈闪电战上，如果有人不介意看一看。

要重现此问题，请执行以下操作：

1. 前往： https://stackblitz.com/edit/mat-table-dynamo
2. 请注意，表中没有数据。
3. 选择"每页项目数"下拉菜单并更改为其他值。
4. 该表填充从可观察量返回的数据。

感谢您的帮助！

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]));
}));
}

这是工作的工作堆栈闪电战