我正在尝试创建一个角度材质表，显示来自APIendpoint的动态数据，但只有表头填充屏幕，其中没有任何数据。

它也不会抛出任何错误…

每当我输入硬编码数据时，它就会起作用。但这不是我想要的。

这是我的table-组件. 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中包含的内容，并获得预期的数据：对象数组

但是它们没有填充表…它看起来像这样：