如何为材料表 [dataSource] 正确格式化此数据？答案

【问题标题】：How to properly format this data for Material Table [dataSource]?如何为材料表 [dataSource] 正确格式化此数据？
【发布时间】：2018-12-25 06:55:16
【问题描述】：

我可以使用*ngFor='let earning of symbolEarnings.earnings'>{{earning.actualEPS}}从 API 中获取数据以进行显示@现在我正在尝试使用 mat-table，以便它与我的应用程序的其余部分保持一致。

现在如果我使用 symbolEarnings 这是 [dataSource] 中的一个对象 Object，我会收到错误

提供的数据源与数组、Observable 或 DataSource 不匹配

现在我过去几个小时一直在做的是尝试转换为数组。作为参考，这是数据。

{"symbol":"AAPL","earnings":
[
{"actualEPS":2.91, "EPSReportDate":"2018-11-01"},
{"actualEPS":2.34,"EPSReportDate":"2018-07-31"}
]}

所以我用它来获取 symbolEarnings

    getEarning(): void {
        const id = this.route.snapshot.paramMap.get("id");
        this.svc.getEarningById(id).subscribe(data => {
          this.symbolEarnings = data;

当我做'let x of symbolEarnings.earnings' {{x.actualEPS]]时效果很好

数据当前是一个对象Object，所以我得到了上面突出显示的错误。

我尝试将收入部分转换为数组，但无济于事。 this.test = this.symbolEarnings.earnings; 或 this.testArray = Object.keys(this.test).map(i => this.test[i]);

有趣的是testArray 适用于[dataSource] 但我需要执行*ngFor='let y of testArray' [dataSource]="testArray" 来获取列然后使用<td mat-cell>{{y.actualEPS}}</td> 产生结果但它在多个表上重复。

For example, EPS: 2, 2, 2 EPS: 3, 3, 3 EPS: 4, 4, 4 rather than EPS: 2, 3, 4

所以我有点让它有点工作，但我显然需要一些帮助。如果您有任何问题，请告诉我！谢谢

【问题讨论】：

你为什么要*ngFor？
@Abhishek 我正在使用它来检索对象内的单个对象以获取行。例如，{1: {1:a}, {2:b}, 2: {1:c}, {2:d}} 执行 *ngFor='let x of y' {{x.1}}应该得到它 a 和 c 对吗？我不应该这样做吗？
我认为垫子桌很复杂，但如果你尝试一下，它对你来说是正常的桌子。
@Abhishek 我可以在普通桌子上做，但我想在垫子桌子上使用它，以便与外观相匹配

标签： javascript arrays angular angular-material

【解决方案1】：

我让它工作了。原来是*matCellDef="let element">{{element.actualEPS}}，这里只引用了 MatTableDataSource。所以我用了dataSource = new MatTableDataSource(); 然后

  getEarning(): void {
    const id = this.route.snapshot.paramMap.get("id");
    this.svc.getEarningById(id).subscribe(data => {
      this.symbolEarnings = data;
      this.symbolEarningsDetail = this.symbolEarnings.earnings;
      this.dataSource.data = this.symbolEarningsDetail;

【讨论】：