json - 使用ngFor-Loop(JSON)显示JSON

我希望你们能帮助我。我们的计划是用ngfor循环显示保存在.json文件中的数据。
到目前为止，我的代码总是会遇到以下错误：

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

我研究过，知道我必须用管子来修理它。但我不知道它是怎么工作的，因为我对角度很陌生。
这就是我加载json并将其分配给temp变量的方式：

ngOnInit(): void {
    this.http.get('assets/tempdata.json').subscribe(data => {
       //console.log(data);
       this.temps = data;
    });
}

这里是.html文件的一部分，我想展示它：

<mat-card-content>
          <mat-list>
            <mat-list-item *ngFor="let temp of temps">
              <i class="{{temp.icon}}"></i><p>{{temp.temp}}{{temp.room}}</p>
            </mat-list-item>
          </mat-list>
</mat-card-content>

这是我要显示的.json文件：

{
  "temperature": [
      {
        "temp": "4°",
        "room": " Outside",
        "icon": 4
      },
      {
        "temp": "21°",
        "room": " Livingroom",
        "icon": 21
      },
      {
        "temp": "24°",
        "room": " Bedroom",
        "icon": 24
      },
      {
        "temp": "11°",
        "room": " Basement",
        "icon": 11
      }
  ]
}

如果有人能帮我解决这个问题，那就太棒了。任何暗示或更多都是有帮助的。谢谢！

最佳答案

旧http
您需要.map()

ngOnInit(): void {
    this.http.get('assets/tempdata.json')
        .map((res: Response) => res.json())
        .subscribe(data => {
           //console.log(data);
           this.temps = data;
    });
}

http客户端
在<any>之后需要get。

ngOnInit(): void {
    this.http.get<any>('assets/tempdata.json')
        .subscribe(data => {
           //console.log(data);
           this.temps = data;
    });
}

同样在html中，您应该根据对象在temps.temperature上循环
<mat-list-item *ngFor="let temp of temps.temperature">
或者，您可以执行this.temps = data.temperature。