Angular not pulling data through Angularfire2

Lac Nova

I have been having a problem getting data back from the Real time Database on firebase. Everything is set correctly, the Read and Write permissions are public so I don't have to authenticate.

npm compiles successfully. So the code is good (Angular-CLI). I tried exactly what is on the GitHub page as far as the documentation goes.

When I interpolate pulling data from an Object the return on the front end is Null. When I do the same for a List the return is blank. *ngFor won't even work.

Anyone has the same problem or could help?

The code looks like this. That's a direct copy from the documentation.

My database actually has no label that says " Items " as per db.list('items') . I dont think that would be the issue, but would that create a problem?

import { Component } from '@angular/core';
import { AngularFireDatabase } from      'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
   {{ item | json }}
    </li>
  </ul>
  `,
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('items').valueChanges();
  }
}

The data in firebase has this structure..

[ 
 {"THIS" : string , "THAT" : string},
 {"THIS" : string , "THAT" : string}
]

That's what the file looks like before I uploaded.

Tim Hovius

I think you forgot to create the items collection.

You are subscribed to the items collection here:

this.items = db.list('items').valueChanges();

Try to import this one and see if you get some results:

{
  "items": [
    {
      "THIS": "test",
      "THAT": "test"
    },
    {
      "THIS": "test",
      "THAT": "test"
    }
  ]
}

In firebase it looks like:

enter image description here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angularfire2 Firestore not pulling data from firebase

.data, information pulling through as NaN?

Angular 4 with AngularFire2

Angular Material 2 Data Table Connect to AngularFire2 or Firebase Service?

Read and update below formatted data of Fire-base in Angular 5 application using AngularFire2

Angular/angularfire2 - Read a document observable and save the data to an object. No async pipe

JSON data not pulling through for textarea input control

Angular2 and Firebase (AngularFire2)

Angular 6 and AngularFire2 RxJS Error

Angularfire2 compiling issues in Angular 5.2

AngularFire2 access data after retrieve it

Display Data from firebase with angularfire2

AngularFire2 - Querying Data on $key

access another firestore data in angularfire2

angularfire2 firebaseListObservable push data

Pulling data from DB and showing it in Angular

Child form component is not pulling through default form data of parent component

React.js, pulling data from api and then looping through to display

Passing Array through Post and Pulling data from db

Pulling local json data file through ajax request

Create or increment a value with Angular2/AngularFire2

Get Data Through ID in Angular 2/4

Passing data through Angular2 router

Passing dynamic data through Angular 2 route

css not pulling through

Connecting angular to firebase using angularFire2 version 5.0

Angular 4, angularfire2, Metadata version mismatch

Cannot find a differ supporting object angular / angularfire2

(Angular / AOT) - Angularfire2 'initializeApp()' not loading the correct config properties

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive