Question

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

我在stackoverflow中尝试了25种以上的解决方案，但看来我的情况是独一无二的，没有其他人使用没有键/标签的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时，应用程序中断并抛出错误：无法找到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

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

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

1 个答案: