Question

我有以下JSON结构：

{
  "vt1hourlyForecast": {
    "processTime": [
      "2019-08-23T13:00:00+0300",
      "2019-08-23T14:00:00+0300",
      "2019-08-23T15:00:00+0300"
    ],
    "temperature": [
      43,
      44,
      44
    ],
    "icon": [
      34,
      34,
      32
    ]
  }
}

我尝试使用NgFor从vt1hourlyForecast对象获取这些数组，但我得到错误

error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

html

    <ion-item *ngFor="let item of hourly">
    <div style="direction: rtl;margin-inline-end: auto;">
      <div>{{item.vt1hourlyForecast.processTime | date:'h:mm a'}}</div>
      <div>
        {{item.vt1hourlyForecast.phrase}} ,
        درجة الحرارة : °{{item.vt1hourlyForecast.temperature}}
      </div>
    </div>
    <ion-thumbnail slot="end">
      <img src="assets/icon/{{item.vt1hourlyForecast.icon}}.png">
    </ion-thumbnail>
  </ion-item>

代码

 this.http.get("xxxxxxxxx")
        .subscribe(data => {

          this.hourly = data


          console.log("forecast " + this.hourly)
        })

有什么方法可以使用NgFor获得那些数组？

Answer 1

实际上，您需要遍历内部数组之一，并基于当前正在尝试遍历不可迭代的对象的索引获取其他值。

<ng-container *ngIf="hourly && hourly.vt1hourlyForecast"> <!-- check it's defined -->
<ion-item *ngFor="let time of hourly.vt1hourlyForecast.processTime;let i = index">
<div style="direction: rtl;margin-inline-end: auto;">
  <div>{{time | date:'h:mm a'}}</div>
  <div>
    {{hourly.vt1hourlyForecast.phrase[i]}} ,
    درجة الحرارة : °{{hourly.vt1hourlyForecast.temperature[i]}}
  </div>
</div>
<ion-thumbnail slot="end">
  <img src="assets/icon/{{hourly.vt1hourlyForecast.icon[i]}}.png">
</ion-thumbnail>
</ion-item>
</ng-container>

Answer 2

您应该重新排列json以将数组结构反映为

[
    {
        "processTime": "2019-08-23T13:00:00+0300",
        "temperature": 43,
        "icon": 34
    },
    {
        "processTime": "2019-08-23T14:00:00+0300",
        "temperature": 44,
        "icon": 34
    },
    {
        "processTime": "2019-08-23T15:00:00+0300",
        "temperature": 44,
        "icon": 32
    }
]

相应的html可能像这样：

<ion-item *ngFor="let item of hourly">
    <div style="direction: rtl;margin-inline-end: auto;">
        <div>{{item.processTime | date:'h:mm a'}}</div>
        <div>
            درجة الحرارة : °{{item.temperature}}
        </div>
    </div>
    <ion-thumbnail slot="end">
        <img src="assets/icon/{{item.icon}}.png">
    </ion-thumbnail>
</ion-item>

角获取数组使用* ngFor形成对象

2 个答案: