Question

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

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

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上。

重现该问题：

转到：https://stackblitz.com/edit/mat-table-dynamo
请注意，表中没有数据。
选择“每页项数”下拉菜单并更改为其他值。
该表将填充Observable返回的数据。

感谢您的帮助！

Answer 1

按角度编写任何服务的经验法则是，如果服务中包含.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

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

1 个答案: