json - json Angular:'Cannot find a differ supporting object'[object Object]'of type'对象'. NgFor only supports binding to Iterables such as Arrays'

我创建了一个Angular应用程序,它从json文件中获取数据,但是,我在html中显示数据时遇到问题,

这是服务:


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)


 }


 }



这是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


 }]}



组件:


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);



 }


}



还有html:


<ul>


 <li *ngFor="let afd of afdeling">


 {{afd.patientid}}


 </li>


</ul>



时间:

由于错误消息,ngFor只支持Iterables,例如,Array,所以不能将它用于。

更改


private extractData(res: Response) {


 let body = <Afdelingen[]>res.json();


 return body || {}; // here you are return an object


}




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


}



PortafolioComponent.html:3 ERROR Error : Error trying to diff'[object Object]'. only arrays and iterables are allowed(... )

在例子中,修复代码是:


//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(); 


 });


 }



}



记住将Observables传递给async,比如*ngFor item of items$ | async*ngFor item of items$items$显然是一个Observable对象,因为用$标记它,类似于items$: Observable<IValuePair>this.items$ = this.someDataService.someMethod<IValuePair>()返回T类型的Observable。

...