javascript - 来自 Http 的 Angular 4 对象没有显示/通过

Question

我有 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);
    }
}

Answer 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>

https://plnkr.co/edit/tM3wOTbWVNvOu0FyvRwz?p=preview