Javascript 命中API端点的角度材质数据表

我试图创建一个角度材质表，该表显示来自API端点的动态数据，但只有表头填充屏幕，其中没有任何数据

而且它也不会抛出任何错误

每当我把硬编码的数据，它的工作。但那不是我想要的

这是我的table-component.ts文件

如您所见，我正在向控制台打印COUNTRY_数据中包含的内容，并获得预期的数据：一个对象数组

但它们不会填充表格。。。看起来是这样的：

---

代码的主要问题是，您没有将数组推送到数据源中，而是实例化了一个空实例

如果调用dataSource=newMattableDataSourceCountry\u DATA；在console.logCOUNTRY_DATA的位置，它应该可以工作

当接收到一个可观察的响应时，一个更好的方法是使用映射而不是循环，下面是映射的答案

---

另外，如果您使用一个接口来介绍您的对象，并将结果映射到您的ApiService中，并将其设置为组件中数据源的值，则会更好。

谢谢！成功了！更重要的是，我明白了为什么它会起作用。很好，很高兴我帮了忙！

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