각도 : ''object '유형의'[object Object] '와 (과) 다른 지원 개체를 찾을 수 없습니다. NgFor는 배열 같은 반복문에 대한 바인딩 만 지원합니다.

Question

json 파일에서 데이터를 가져 오는 각형 응용 프로그램을 만들었습니다. 하지만 html로 데이터를 표시하는 데 문제가 있습니다. 많은 변수가 네덜란드에 있습니다. 유감입니다.

{ 
    "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 {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 파일의 일부입니다 :이 모든

이

내 서비스입니다 :)에 나는 또한 약간 새로운 해요

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

Answer 2

에 저도 같은 문제이고 Pengyy 제안으로, 그 수정이다. 고마워.

브라우저 콘솔 내 문제 : 내 경우

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

내 코드를 수정했습니다 :

는 *ngFor item of items$ | async, 어디를 같이 비동기하기 위해 파이프 Observable 인에

//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$을 시도하고 있습니다. items$은 분명히 관찰 할 수 있습니다. 이 경우 과 비슷한 이고 할당은 T 형식의 관찰 가능 객체를 반환하는 this.items$ = this.someDataService.someMethod<IValuePair>()과 같을 수 있습니다.