命中 API 端點的角度材料數據表

Question

我正在嘗試創建一個 Angular Material Table，它顯示來自 API 端點的動態數據，但只有 Table Header 填充屏幕，其中沒有任何數據。

而且它也不會拋出任何錯誤......

每當我放置硬編碼數據時，它都會起作用。 但這不是我想要的。

這是我的table-component.ts文件

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service'
import { MatTableDataSource } from '@angular/material/table';

const COUNTRY_DATA = []

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})

export class TableComponent implements OnInit {

  countryJSON;
  displayedColumns: string[] = ['name', 'cases', 'deaths', 'recov', 'permill'];
  dataSource = new MatTableDataSource(COUNTRY_DATA);

  constructor(private apiService: ApiService) {
  }

  ngOnInit(): void {
    this.apiService.getNews().subscribe((dataJSON) => {
      this.countryJSON = dataJSON
      for (let countryObject of this.countryJSON) {
        COUNTRY_DATA.push
          ({
            name: countryObject.country_name,
            cases: countryObject.total_cases,
            deaths: countryObject.total_deaths,
            recov: countryObject.total_recov,
            permill: countryObject.case_per_mill
          })
      }

      console.log(COUNTRY_DATA)
    })
  }
}

如您所見，我正在向控制台打印COUNTRY_DATA包含的內容，並獲得了預期數據：對象數組

但它們不會填充表......它看起來像這樣：

Answer 1

好吧，您的代碼的主要問題是您沒有將數組推送到數據源中，而是實例化了一個空實例。

如果你調用dataSource = new MatTableDataSource(COUNTRY_DATA); 在console.log(COUNTRY_DATA)的位置它應該可以工作。

接收可觀察響應時更好的方法是使用map而不是循環，這里是映射的答案How to map a response from http.get to a new instance of a typed object in Angular 2

PS 如果您使用interface來引入您的對象，並將結果映射到您的ApiService並將其設置為組件中數據源的值，那會好得多。