Angular Material Table 不會在初始加載時填充外部數據

Question

我正在處理一個 Angular 6 項目，我通過 Observable 將數據從 AWS DynamoDB 表加載到材料表組件中。 我使用 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]));
    }));
}

這是正在工作的 StackBlitz