Question

我希望你们有人能帮助我。我们的计划是使用ngFor循环显示保存在.json文件中的数据。

到目前为止我的代码总是遇到以下错误：

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

我研究并知道我必须使用Pipes来修复它。但我不知道它是如何工作的，因为我对Angular很新。

这是我加载JSON并将其作为临时变量的方式：

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

如果有人可以帮助我，这将是非常棒的。任何提示或更多都是有帮助的。非常感谢！

Answer 1

ngFor遍历表而不是对象。错误告诉你。

您的JSON是一个对象（它以{开头，而不是[）。

如果要迭代它，则必须将其更改为数组，或者必须迭代键。要做到这一点：

this.keys = Object.keys(data);

在您的HTML中：

<mat-list-item *ngFor="let key of keys">

您将使用

访问您的数据

{{ temps[key] }}

Answer 2

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

这里输入的json是嵌套对象，你的列表位于温度属性中..所以改变上面的代码。

Answer 3

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

Answer 4

您可以使用HttpClient而不是Http。

因为 Http很快就会被弃用，我甚至强烈建议你这样做。

简单地做

import { HttpClient } from '@angular/common/http';

而不是

import { Http } from '@angular/http';

并在您的构造函数中

constructor(private http: HttpClient) {}

（如果您想知道，您的问题是您没有解析对数据的回复）

哦，顺便说一句，你的*ngFor应该有异步管道：

<mat-list-item *ngFor="let temp of temps | async">

Answer 5

你正在迭代一个对象，ngFor用于数组。

使用<mat-list-item *ngFor="let temp of temps.temperature">

使用ngFor-Loop显示JSON（Angular）

5 个答案: