角度：“找不到类型为“对象”的其他支持对象“ [对象对象]”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>