Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular Error: NgFor only supports binding to Iterables such as Arrays.

07.01.2021 (👁2239)


 

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;

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

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

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

  constructorprivate 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>