我有Angular 4代码，它应该从本地JSON文件中检索数据。 JSON文件具有嵌套数组。当错误消息显示它正在从JSON文件中获取某些数据时，根本不显示更深层次的嵌套数据。这是我的JSON文件：
{
"daysofinterest": {
"name": "Holidays",
"year": "2017",
"version": "1.0",
"dataitems": [{
"langauage": "english",
"listvalues": [{
"id": "ac33",
"name": "New Year's Day",
"value": "New Year's Day",
"startdatetime": "02/01/2017 00:00:00 AM",
"enddatetime": "02/01/2017 11:59:59 PM",
"description":"The first day of the year",
"type":"statutory"
},
{
"id": "bbc3",
"name": "Family Day",
"value": "Family Day",
"startdatetime": "20/02/2017 00:00:00 AM",
"enddatetime": "20/02/2017 11:59:59 PM",
"description":"Board Game Day with the family",
"type":"statutory"
},
{
"id": "dec2",
"name": "Good Friday",
"value": "Good Friday",
"startdatetime": "14/04/2017 00:00:00 AM",
"enddatetime": "14/04/2017 11:59:59 PM",
"description":"Easter",
"type":"statutory"
}
]
}, {
"langauage": "french",
"listvalues": [{
"id": "nnv4",
"name": "Jour de l'An",
"value": "Jour de l'An",
"startdatetime": "02/01/2017 00:00:00 AM",
"enddatetime": "02/01/2017 11:59:59 PM",
"description":"The first day of the year",
"type":"statutory"
},
{
"id": "hhg6",
"name": "Journée familiale",
"value": "Journée familiale",
"startdatetime": "20/02/2017 00:00:00 AM",
"enddatetime": "20/02/2017 11:59:59 PM",
"description":"Board Game Day with the family",
"type":"statutory"
},
{
"id": "khm6",
"name": "Vendredi saint",
"value": "Vendredi saint",
"startdatetime": "14/04/2017 00:00:00 AM",
"enddatetime": "14/04/2017 11:59:59 PM",
"description":"Easter",
"type":"statutory"
}
]
}]
}
}
我如何迭代这个？我也得到了错误：
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'Holidays'. NgFor only supports binding to Iterables such as Arrays.
以下是我的其他文件。
Daysofinterest.ts
export class Daysofinterest {
constructor(
public name: string,
public year: string,
public version: string,
public language: string,
public id: string,
public value: string,
public start: string,
public end: string,
public description: string
) {
}
}
我的组件文件的一部分：
loaddaysofinterestToEdit(daysofinterestName: string) {
this.preProcessConfigurations();
this.daysofinterestService.getdaysofinterestById(daysofinterestName)
.subscribe(daysofinterest => {
this.daysofinterestIdToUpdate = daysofinterest.name;
this.daysofinterestForm.setValue({ name: daysofinterest.name, year: daysofinterest.year, version: daysofinterest.version,
language: daysofinterest.language, id: daysofinterest.id, value: daysofinterest.value, start: daysofinterest.start,
end: daysofinterest.end, description: daysofinterest.description });
this.processValidation = true;
this.requestProcessing = false;
},
errorCode => this.statusCode = errorCode);
}
以下是我的daysofinterest.component.html
的一部分<div *ngFor="let daysofinterest of alldaysofinterests">
<ul>
<li>{{daysofinterest.name}}</li>
<li>{{daysofinterest.year}}</li>
<li>{{daysofinterest.version}}</li>
</ul>
<ng-container *ngFor="let dataitem of daysofinterest.dataitems">
<ng-container *ngFor="let listvalue of dataitem.listvalues">
{{listvalue.name}}
</ng-container>
</ng-container>
<div *ngFor="let dataitem of daysofinterest.dataitems">
<p>{{dataitem.language}}</p>
<div *ngFor="let listvalue of daysofinterest.dataitems.listvalues">
<li>{{listvalue.id}}</li>
<li>{{listvalue.value}}</li><li>{{listvalue.start}}</li>
<li>{{listvalue.end}}</li><li>{{listvalue.description}}</li>
</div>
</div>
编辑：根据要求：
//Fetch all daysofinterests
getAllDaysofinterest() {
this.daysofinterestService.getAllDaysofinterest()
.subscribe(
data => this.alldaysofinterests = data,
errorCode => this.statusCode = errorCode);
}
编辑：进一步请求：
import { Injectable } from '@angular/core';
import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import { Daysofinterest } from './daysofinterest';
@Injectable()
export class DaysofinterestService {
//URL for CRUD operations
daysofinterestUrl = "http://localhost:3000/daysofinterest";
//Create constructor to get Http instance
constructor(private http:Http) {
}
//Fetch all daysofinterests
getAllDaysofinterest(): Observable<Daysofinterest[]> {
return this.http.get(this.daysofinterestUrl)
.map(this.extractData)
.catch(this.handleError);
}
//Create daysofinterest
createdaysofinterest(daysofinterest: Daysofinterest):Observable<any> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.post(this.daysofinterestUrl, daysofinterest, options)
.map(success => success.status)
.catch(this.handleError);
}
//Fetch daysofinterest by id
getdaysofinterestById(daysofinterestId: string): Observable<Daysofinterest> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
console.log(this.daysofinterestUrl +"/"+ daysofinterestId);
return this.http.get(this.daysofinterestUrl +"/"+ daysofinterestId)
.map(this.extractData)
.catch(this.handleError);
}
//Update daysofinterest
updatedaysofinterest(daysofinterest: Daysofinterest):Observable<string> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.put(this.daysofinterestUrl +"/"+ daysofinterest.name, daysofinterest, options)
.map(success => success.status)
.catch(this.handleError);
}
//Delete daysofinterest
deletedaysofinterestById(daysofinterestId: string): Observable<string> {
let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: cpHeaders });
return this.http.delete(this.daysofinterestUrl +"/"+ daysofinterestId)
.map(success => success.status)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body;
}
private handleError (error: Response | any) {
console.error(error.message || error);
return Observable.throw(error.status);
}
}
答案 0 :(得分：1)
HTML中存在一些问题。看一下Plunker：
<div *ngFor="let daysofinterest of alldaysofinterests">
<ul>
<li>{{daysofinterest.name}}</li>
<li>{{daysofinterest.year}}</li>
<li>{{daysofinterest.version}}</li>
</ul>
<ng-container *ngFor="let dataitem of daysofinterest.dataitems">
<ng-container *ngFor="let listvalue of dataitem.listvalues">
{{listvalue.name}}
</ng-container>
</ng-container>
<div *ngFor="let dataitem of daysofinterest.dataitems">
<p>{{dataitem.language}}</p>
<div *ngFor="let listvalue of daysofinterest.dataitems.listvalues">
<li>{{listvalue.id}}</li>
<li>{{listvalue.value}}</li><li>{{listvalue.start}}</li>
<li>{{listvalue.end}}</li><li>{{listvalue.description}}</li>
</div>
</div>