json Angular：'找不到'object'类型的不同支持对象'[object Object]'。NgFor 仅支持绑定到 Iterables，例如 Arrays'
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43998092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays'
提问by Claire
I've created an angular app which gets data from a json file. But I'm having issues with showing the data in html. A lot of variables are in dutch, I'm sorry for that. I'm also a bit new to all of this :)
我创建了一个 angular 应用程序，它从 json 文件中获取数据。但是我在以 html 显示数据时遇到问题。很多变量都是荷兰语，我很抱歉。我对这一切也有点陌生:)
This is my service:
这是我的服务：
import {Injectable} from '@angular/core';
import {Http, RequestOptions, Response, Headers} from '@angular/http';
import {Observable} from "rxjs";
import {Afdelingen} from "./models";
@Injectable()
export class AfdelingService {
private afdelingenUrl = '/assets/backend/afdelingen.json';
constructor(private http: Http) {
}
getAfdelingen(): Observable<Afdelingen[]> {
return this.http.get(this.afdelingenUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = <Afdelingen[]>res.json();
return body || {};
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
addAfdeling(afdelingsNaam: string, afdeling: any): Observable<Afdelingen> {
let body = JSON.stringify({"afdelingsNaam": afdelingsNaam, afdeling: afdeling});
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
return this.http.post(this.afdelingenUrl, body, options)
.map(res => <Afdelingen> res.json())
.catch(this.handleError)
}
}
This is part of my json file:
这是我的 json 文件的一部分：
{
"afdelingen": [
{
"afdelingsNaam": "pediatrie",
"kamernummer": 3.054,
"patientid": 10001,
"patientennaam": "Joske Vermeulen",
"reden": "Appendicitis",
"opname": "12/05/2017",
"ontslag": "28/06/2017",
"behandelingstype": "nazorg",
"behandelingsomschrijving": "wondverzorging",
"behandelingsdatum": "10/06/2017",
"behandelingstijd": "10:20",
"vegitarisch": false,
"Opmerkingen": "",
"sanitair": true,
"kinderverzorgingsruimte": false,
"salon": true,
"hulp": true,
"width": 5,
"height": 5
},
{
"afdelingsNaam": "pediatrie",
"kamernummer": 3.055,
"patientid": 10002,
"patientennaam": "Agnes Vermeiren",
"reden": "Beenbreuk",
"opname": "18/05/2017",
"ontslag": "30/06/2017",
"behandelingstype": "nazorg",
"behandelingsomschrijving": "wondverzorging",
"behandelingsdatum": "10/06/2017",
"behandelingstijd": "10:20",
"vegitarisch": true,
"Opmerkingen": "",
"sanitair": true,
"kinderverzorgingsruimte": false,
"salon": true,
"hulp": false,
"width": 5,
"height": 5
}]}
The Component:
组件：
import {Component, OnInit, Input} from '@angular/core';
import {Afdelingen} from "../models";
import {AfdelingService} from "../afdeling.service";
import {PatientService} from "../patient.service";
@Component({
selector: 'app-afdeling',
templateUrl: './afdeling.component.html',
styleUrls: ['./afdeling.component.css']
})
export class AfdelingComponent implements OnInit {
afdeling: Afdelingen[];
errorMessage:string;
constructor(private afdelingService: AfdelingService, private patientService: PatientService) { }
ngOnInit() {
this.getData()
}
getData() {
this.afdelingService.getAfdelingen()
.subscribe(
data => {
this.afdeling = data;
console.log(this.afdeling);
}, error => this.errorMessage = <any> error);
}
}
and the html:
和 html：
<ul>
<li *ngFor="let afd of afdeling">
{{afd.patientid}}
</li>
</ul>
采纳答案by Pengyy
As the error messages stated, ngForonly supports Iterables such as Array, so you cannot use it for Object.
正如错误消息所述，ngFor仅支持可迭代对象，例如Array，因此您不能将其用于Object.
change
改变
private extractData(res: Response) {
let body = <Afdelingen[]>res.json();
return body || {}; // here you are return an object
}
to
到
private extractData(res: Response) {
let body = <Afdelingen[]>res.json().afdelingen; // return array from json file
return body || []; // also return empty array if there is no data
}
回答by Adam Cox
Remember to pipe Observables to async, like *ngFor item of items$ | async, where you are trying to *ngFor item of items$where items$is obviously an Observable because you notated it with the $similar to items$: Observable<IValuePair>, and your assignment may be something like this.items$ = this.someDataService.someMethod<IValuePair>()which returns an Observable of type T.
请记住将 Observables 管道传输到异步，例如*ngFor item of items$ | async，您正在尝试的*ngFor item of items$地方items$显然是一个 Observable，因为您用$类似于 来标记它items$: Observable<IValuePair>，并且您的分配可能类似于this.items$ = this.someDataService.someMethod<IValuePair>()返回 T 类型的 Observable。
Adding to this... I believe I have used notation like *ngFor item of (items$ | async)?.someProperty
添加到这个......我相信我已经使用了这样的符号 *ngFor item of (items$ | async)?.someProperty
回答by Mostafa Attia
You only need the asyncpipe:
你只需要async管道：
<li *ngFor="let afd of afdeling | async">
{{afd.patientid}}
</li>
always use the asyncpipe when dealing with Observables directly without explicitly unsubscribe.
async在直接处理 Observables 时总是使用管道而不显式取消订阅。
回答by Angel Diaz
I was the same problem and as Pengyy suggest, that is the fix. Thanks a lot.
我遇到了同样的问题，正如 Pengyy 所建议的那样，这就是解决方案。非常感谢。
My problem on the Browser Console:
我在浏览器控制台上的问题：
PortafolioComponent.html:3 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed(…)
PortafolioComponent.html:3 ERROR 错误：尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象(...)
In my case my code fix was:
在我的情况下，我的代码修复是：
//productos.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class ProductosService {
productos:any[] = [];
cargando:boolean = true;
constructor( private http:Http) {
this.cargar_productos();
}
public cargar_productos(){
this.cargando = true;
this.http.get('https://webpage-88888a1.firebaseio.com/productos.json')
.subscribe( res => {
console.log(res.json());
this.cargando = false;
this.productos = res.json().productos; // Before this.productos = res.json();
});
}
}
