来自其余 API 的数据未显示在 Angular 材料表中答案

【问题标题】：Data from rest API not showing up in Angular Material Table来自其余 API 的数据未显示在 Angular 材料表中
【发布时间】：2019-08-19 16:31:41
【问题描述】：

我正在尝试在角度材料表中显示数据，这里是获取从 API 获取数据的请求

export class ProductsListComponent implements OnInit {
            // Table fields
            displayedColumns = ['select', 'country', 'actions'];
            datasource = ????? //how should I give api's data source 
        }

        ngOnInit() {
                    let observ = this.http.get('https://kbzp6jhg2h.execute-api.us-east-1.amazonaws.com/Prod/api/v1/hierarchy/countries?status=1');
                    observ.subscribe((res)=> {
                        console.log("response from api",res['data']);
                });

这是我要显示来自 API 的数据的 html 文件

<mat-table class="lmat-elevation-z8" #table [dataSource]="dataSource">
    <ng-container matColumnDef="country">
        <mat-header-cell *matHeaderCellDef>Country Name</mat-header-cell>
        <mat-cell *matCellDef="let product">{{product.name}}</mat-cell>
    </ng-container>
</mat-table>

【问题讨论】：

docs site 上不乏示例。代码：stackblitz.com/angular/…
好吧，它没有显示，因为您没有将订阅中的数据设置到模型中。您忘记保存数据以实际显示它。

标签： angular rest angular-material-table

【解决方案1】：

如果使用空数组初始化datasource 并在数据来自可观察对象时重置它呢？类似的东西：

export class ProductsListComponent implements OnInit {
            // Table fields
            displayedColumns = ['select', 'country', 'actions'];
            datasource = []

        ngOnInit() {
                    this.http.get('https://kbzp6jhg2h.execute-api.us-east-1.amazonaws.com/Prod/api/v1/hierarchy/countries?status=1')
                   .subscribe((res)=> {
                        this.datasource = res
                   });
        }

}

【讨论】：