Fehler:
NgFor only supports binding to Iterables such as Arrays.
Ursache:
es werden Daten von Firebase geholt, welche in ein Array übergeben werden sollen
Falscher javascript Typescript Code
Im javascript Typescript Code
in app.component.ts
export class AppComponent { title = 'dailycheck'; //public firebase_Data: Observable<any>[]; //works with AngularFireList<any>..subscribe(x=>{ this.aufgaben= x;} //public firebase_Data : AngularFireList<any>;
public firebase_Data; constructor( private afDb:AngularFireDatabase ) { }
ngOnInit() { this.firebase_Data = this.afDb.list('Aufgaben'); }
|
Lösung Schritt 1:
Man muss die lokale Variable vom passenden Typ deklarieren.
Hierzu mit der Maus über firebase.list(…) hovern und der Rückgabetyp wird angezeigt
Also in diesem Fall als Rückgabe von Firebase ist AngularFireList oder früher Observable
public firebase_Data : AngularFireList<any>; |
public firebase_Data : AngularFireList<any>; //*error: public firebase_Data; constructor( private afDb:AngularFireDatabase ) { }
ngOnInit() { this.firebase_Data = this.afDb.list('Aufgaben'); }
|
Fehler im Chrome Browser Entwicklerumgebung->Console
core.js:5967 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.ngDoCheck (common.js:3223) at callHook (core.js:2490) at callHooks (core.js:2456) at executeInitAndCheckHooks (core.js:2408) at refreshView (core.js:9194) at refreshComponent (core.js:10345) at refreshChildComponents (core.js:8976) at refreshView (core.js:9229) at renderComponentOrTemplate (core.js:9293)
at tickRootContext (core.js:10519) |
Und in der Ausgabe
In app.component.html
<h1>{{title}}</h1> <ul> <li *ngFor="let item of firebase_Data "> {{ item }} </li> </ul>
|
Achtung: folge Beitrag beachten mit dem Fehler
Folge Problem Umstellung auf async
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. |
core.js:5967
Lösung Schritt 2:
In der Ausgabe .html muss man den Anhang async in der *ngFor Schleife anfügen
<h1>{{title}}</h1> <ul> <li *ngFor="let item of firebase_Data | async"> {{ item }} </li> </ul>
|
Problem Schritt 2:
Fehlermeldung
core.js:5967 ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' |
Finale Änderung
Man muss die Liste aufrufen mit:
this.firebase_Data = this.afDb.list('Aufgaben').valueChanges(); |
In eine Variable vom Typ Obserable
public firebase_Data : Observable<any>; |
Also
public firebase_Data : Observable<any>; constructor( private afDb:AngularFireDatabase ) { }
ngOnInit() { this.firebase_Data = this.afDb.list('Aufgaben').valueChanges(); }
|
Solved Lösung gesamt
Finale Lösung in Angular mit Firebase
import { Component } from '@angular/core'; import { AngularFireDatabase,AngularFireList } from 'angularfire2/database'; import { Observable } from 'rxjs';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { //--< Daten >-- title = 'dailycheck'; public firebase_Data : Observable<any>; constructor( private afDb:AngularFireDatabase ) { }
ngOnInit() { this.firebase_Data = this.afDb.list('Aufgaben').valueChanges(); } }
|
Und in App.component.html
<h1>{{title}}</h1> <ul> <li *ngFor="let item of firebase_Data | async"> {{ item }} </li> </ul>
|