角度： ''オブジェクト 'タイプの異なるサポートオブジェクト' [オブジェクトオブジェクト] 'が見つかりません。 NgForは配列などのIterablesへのバインディングのみをサポートします

Question

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> 

Answer 1

エラーメッセージとして、ngForはArrayなどのIterablesのみをサポートするため、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 
} 

Answer 2

へ

変更

private extractData(res: Response) { 
    let body = <Afdelingen[]>res.json(); 
    return body || {};  // here you are return an object 
} 

私は同じ問題だったとPengyyが示唆するように、それは修正です。どうもありがとう。ブラウザのコンソール上

私の問題：私の場合は

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

} 

Answer 3

はどこ、*ngFor item of items$ | asyncのように、非同期するパイプ観測することを忘れないでください*ngFor item of items$にしようとしています。items$は明らかにObservableです。 items$: Observable<IValuePair>に似た$の割り当てがあり、タイプTのObservableを返すthis.items$ = this.someDataService.someMethod<IValuePair>()のようなものが割り当てられます。