Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

Error:

NgFor only supports binding to Iterables such as Arrays.

 

Cause:

data von Firebase is retrieved, which are to be transferred into an array

 

Incorrect javascript Typescript Code

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

  }

 

 

 

 

 

Solution Step 1:

You have to declare the local Variable of the appropriate type.

To do this, hover with the mouse over firebase.list(...) and the return type is displayed

So in this case as a return of Firebase is AngularFireList or earlier 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');

  }

 

 

 

 

Error in Chrome BrowserE ntwicker Environment->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)

 

And in the edition

In app.component.html

 

<h1>{{title}}</h1>

<ul>

    <li *ngFor="let item of firebase_Data ">

        {{ item }}

    </li>

</ul>

 

 

 

Attention: follow post note with the error

 

Follow problem switch to 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

 

Solution Step 2:

In the output .html you have to append the attachment async in the *ngFor loop

 

<h1>{{title}}</h1>

<ul>

    <li *ngFor="let item of firebase_Data | async">

        {{ item }}

    </li>

</ul>

 

 

 

 

Problem Step 2:

Error message

 

core.js:5967 ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

 

 

Final change

You have to go to the list with:

 

this.firebase_Data = this.afDb.list('Aufgaben').valueChanges();

Into an Obserable variable

 

public firebase_Data : Observable<any>;

 

Also

  public firebase_Data : Observable<any>;

  constructorprivate afDb:AngularFireDatabase ) {

  }

 

  ngOnInit()

  {

    this.firebase_Data = this.afDb.list('Aufgaben').valueChanges();

  }

 

 

 

Solved Solution Total

Final solution in Angular with 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 var is private and only accessible within class AppComponent
»
Angular Error NullInjectorError No provider for AngularFireDatabase
»
Solved 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: HostResourceResolver: could not resolve
»
Error message: ng serve The serve command requires to be run in an Angular project
»
Error message: The file cannot be loaded. The file is not digitally signed npm ng.ps1

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de