web-dev-qa-db-de.com

Winkel: 'Kann kein anderes unterstützendes Objekt' [Objekt Objekt] 'vom Typ' Objekt 'finden. NgFor unterstützt nur das Binden an Iterables wie Arrays

Ich habe eine angular App erstellt, die Daten aus einer JSON-Datei abruft. Ich habe jedoch Probleme mit der Anzeige der Daten in HTML. Viele Variablen sind in Niederländisch, es tut mir leid das. Ich bin auch ein bisschen neu in all dem :)

Das ist mein Service:

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

Dies ist ein Teil meiner JSON-Datei:

{
  "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
    }]}

Die Komponente:

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

  }
}

und das html:

<ul>
  <li *ngFor="let afd of afdeling">
    {{afd.patientid}}
  </li>
</ul>
jsonangularangular-servicesangular-ngfor
13
Claire

Wie in den Fehlermeldungen angegeben, unterstützt ngFor nur Iterables wie Array, sodass Sie es nicht für Object verwenden können.

veränderung

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

zu

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
}
15
Pengyy

Denken Sie daran, Observables an async weiterzuleiten, wie *ngFor item of items$ | async, Wo Sie versuchen, *ngFor item of items$ Zu verwenden, wobei items$ Offensichtlich ein Observable ist, weil Sie es mit $ Ähnlich notiert haben zu items$: Observable<IValuePair>, und Ihre Zuweisung kann so etwas wie this.items$ = this.someDataService.someMethod<IValuePair>() sein, das eine Observable vom Typ T zurückgibt.

Hinzu kommt ... ich glaube, ich habe eine Notation wie *ngFor item of (items$ | async)?.someProperty verwendet

10
Adam Cox

Du brauchst nur die async Pipe:

<li *ngFor="let afd of afdeling | async"> {{afd.patientid}} </li>

verwenden Sie immer die Pipe async, wenn Sie direkt mit Observables arbeiten, ohne das Abonnement explizit zu kündigen.

3
Mostafa Attia

Ich war das gleiche Problem und wie Pengyy vorschlägt, ist das die Lösung. Vielen Dank.

Mein Problem in der Browserkonsole:

Image Problem on Browser Console

PortafolioComponent.html: 3 FEHLER: Fehler beim Versuch, '[object Object]' zu unterscheiden. Nur Arrays und Iterables sind erlaubt (…)

In meinem Fall war mein Code-Fix:

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

}
2
Angel Diaz