无法从 json 打印带有 *ngFor 的表

Question

这个特定的 Json 没有数组中每个元素的 key，我设法与其他 Json 一起工作，这些 Json 带来了元素键并使用这些键在 {{data.key}} 中使用 *ngFor 打印。

我在 stackoverflow 中尝试了超过 25 种解决方案，但似乎我的情况是独一无二的，没有其他人使用没有 keys/labels 的 JSON 来创建表格。

这是我的 Json：

{
    "data": {
        "spnf": {
            "anios": [
                "2018-Q4",
                "2018-Q4"
            ],
            "titulos": [
                "Ingresos Totales",
                "Balance Total"
            ],
            "anioactual": [
                3183,
                -837
            ],
            "anioanterior": [
                3672,
                1549
            ]
        },
        "gob_central": {
            "anios": [
                "2018-Q4",
                "2018-Q4"
            ],
            "titulos": [
                "Ingresos Totales",
                "Balance Total"
            ],
            "anioactual": [
                3183,
                -837
            ],
            "anioanterior": [
                3672,
                1549
            ]
        }
    }
}

这是我的 balances.ts：

{

    this.loader.present().then(() => {
      this.finanzaService.getBalances2()
        .subscribe((result) => {
          this.dataRequest = result;
          this.setData();
          // Disable Loader
          this.loader.dismiss();
        }, (err) => {
          "error blah blah"
        }
        );
    });
  }

public setData(tipo: string = 'spnf') {

  if (tipo == 'spnf') {
    this.dataResumen = _.clone(this.dataRequest.spnf);
  } else {
    this.dataResumen = _.clone(this.dataRequest.gob_central);
  }
}

这是我的 finanzapublica.service.ts：

 public getBalances2(): Observable<any>{
  const url = `${this.apiURL}/balances_fiscales/balances_datos2.json`;
  return this.http.get(url, this.options)
    .map((res: Response) =>  res.json().data);
}

这是我的 balances.html，一旦我尝试 this.dataResumen，应用程序就会中断并抛出错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

          <table *ngIf="dataRequest">
            <thead>
              <tr>
                <td class="border" text-center>Rubro</td>
                <td class="border" *ngFor="let data of this.dataResumen.anios" text-center>{{ data }}</td> <!--this works-->
              </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of this.dataResumen"><!--this doesn't work-->
             <td class="border" text-center>{{data.titulos}}</td>
             <td class="border" text-center>{{data.anioactual}}</td>
             <td class="border" text-center>{{data.anioanterior}}</td>
            </tr>
            </tbody>
          </table>

这是错误：

Cannot find a differ supporting object '{
  "anios": [
    "2018-Q4",
    "2018-Q4"
  ],
  "titulos": [
    "Ingresos Totales",
    "Balance Total"
  ],
  "anioactual": [
    3183,
    -837
  ],
  "anioanterior": [
    3672,
    1549
  ]
}' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

我想要的结果是这样的：

Rubros             2018-Q4       2018-Q4
Ingresos Totales     3183         3672
Balance Total        -837         1549

Answer 1

        <table>
            <thead>
              <tr>
                <td class="border" text-center>Rubro</td>
                <td class="border" *ngFor="let data of dataResumen?.anios" text-center>{{ data }}</td> <!--this works-->
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of dataResumen.titulos; let i=index;">
                {{data}}
                <td>{{dataResumen.anioactual[i]}}</td>
                 <td>{{dataResumen.anioanterior[i]}}</td>
              </tr>

            </tbody>
          </table>