[英]Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays'
I've created an angular app which gets data from a json file.我创建了一个从 json 文件获取数据的角度应用程序。 But I'm having issues with showing the data in html.
但是我在用 html 显示数据时遇到了问题。 A lot of variables are in dutch, I'm sorry for that.
很多变量都是荷兰语,我很抱歉。 I'm also a bit new to all of this:)
我对这一切也有点陌生:)
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>
As the error messages stated, ngFor
only supports Iterables such as Array
, so you cannot use it for Object
.正如错误消息所述,
ngFor
仅支持可ngFor
Object
,例如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
}
Remember to pipe Observables to async, like *ngFor item of items$ | async
请记住将 Observables 通过管道传输到异步,例如
*ngFor item of items$ | async
*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. *ngFor item of items$ | async
,你试图*ngFor item of items$
where 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
这样的符号
You only need the async
pipe:您只需要
async
管道:
<li *ngFor="let afd of afdeling | async">
{{afd.patientid}}
</li>
always use the async
pipe when dealing with Observables directly without explicitly unsubscribe.在直接处理 Observable 时始终使用
async
管道,而无需明确取消订阅。
I was the same problem and as Pengyy suggest, that is the fix.我遇到了同样的问题,正如 Pengyy 所建议的那样,这就是解决方案。 Thanks a lot.
非常感谢。
My problem on the Browser Console:我在浏览器控制台上的问题:
PortafolioComponent.html:3 ERROR Error: Error trying to diff '[object Object]'.
PortafolioComponent.html:3 ERROR 错误:尝试区分“[object Object]”时出错。 Only arrays and iterables are allowed(…)
只允许使用数组和可迭代对象(...)
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();
});
}
}
core.mjs:6362 ERROR Error: NG02200: Cannot find a differ supporting object '634d1a6a93f9a6728261183f' of type 'string'. NgFor only supports binding to Iterables, such as Arrays. Find more at https://angular.io/errors/NG02200
at NgForOf.ngDoCheck (common.mjs:3205:31)
at callHook (core.mjs:2504:18)
at callHooks (core.mjs:2463:17)
at executeCheckHooks (core.mjs:2395:5)
at selectIndexInternal (core.mjs:8548:17)
at Module.ɵɵadvance (core.mjs:8537:5)
at InvoiceFormComponent_Template (invoice-form.component.html:33:55)
at executeTemplate (core.mjs:11835:9)
at refreshView (core.mjs:11698:13)
at refreshComponent (core.mjs:12793:13)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.