如何解决角度:“找不到类型为“对象”的其他支持对象“ [对象对象]”NgFor仅支持绑定到Iterables,例如数组
如错误消息所述,ngFor
仅支持诸如的Iterables Array
,因此您不能将其用于Object
。
更改
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
}
解决方法
我创建了一个有角度的应用程序,该应用程序从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","vegitarisch": true,"hulp": false,"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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。