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

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

一切似乎都正常，我可以看到通过console.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]));
    }));
}

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

复制该问题：

去： 请注意，表中没有数据。 选择“每页项目数”下拉列表并更改为其他值。 表中填充了从可观察对象返回的数据。

---

谢谢你的帮助

用angular编写任何服务的经验法则是，如果您的服务中有一个.subscribe，那么您可能会有99%的错误。始终返回一个可观察的，并让您的组件执行.subscribe

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

要解决您的问题，只需将this.data的值更改为其原始可观察源，一切正常：

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

---

以下是工作原理

在angular中编写任何服务的经验法则是，如果您的服务中有一个.subscribe，您可能会有99%做错。始终返回一个可观察的，并让您的组件执行.subscribe

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

要解决您的问题，只需将this.data的值更改为其原始可观察源，一切正常：

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

---

这里是工作

非常感谢！OfObservable.of是静态示例数据留下的，我忽略了它。非常感谢！Observable.of是静态示例数据留下的，我忽略了它。