Projekt-Anfragen: Tel: 07022/9319004 info@CodeDocu.de Software Entwicklung in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

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

 

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>

 

 

Mobile
»
Angular Error: NgFor only supports binding to Iterables such as Arrays.
»
Angular Error app.component.html error TS2341: Property myVariable is private and only accessible within class AppComponent
»
Angular Error NullInjectorError No provider for AngularFireDatabase Code core.js 5967
»
Angular Firebase Fehler TS2305 Module firebase/app has no exported member firestore
»
Angular Error NG8002: Cant bind to ngModel since it isnt a known property of input
»
Angular Fehler: error TS2339: Property myVariable does not exist on type myComponent.
»
Angular Fehler: Error: HostResourceResolver: could not resolve
»
Fehlermeldung: ng serve The serve command requires to be run in an Angular project
»
Fehlermeldung: Die Datei kann nicht geladen werden. Die Datei ist npm ng.ps1 nicht digital signiert

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Info@CodeDocu.de