CODEWITHSUNDEEP
firebasefirebase-realtime-databaseangular-cliangularfire2
Diego Venâncio
Diego Venâncio

Reputation: 6037

AngularFIRE Property 'subscribe' does not exist on type 'AngularFireList<{}>'

I'm following this tutorial about how to connect angular with firebase database. But in minute 17:30 I'm getting this error:

Property 'subscribe' does not exist on type 'AngularFireList<{}>'

my AppComponent:

import { Component } from '@angular/core';
import {AngularFireDatabase, AngularFireDatabaseModule} from 'angularfire2/database';

import {AngularFireAuth, AngularFireAuthModule} from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';
import { Country } from './models/country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  countries: any[];

  constructor(db: AngularFireDatabase )
  {
     db.list('/Country/countries')
     .subscribe(countries => { //  <--ERROR IS HERE
      this.countries = countries;
      console.log(this.countries);
      });
  }
}

My model:

export class Country {
     // --ATTRIB--
     id: string;
     name: string;
     code: string;
     urlFlag: string;
}

Cant find anything about this error. I'm beginner in angular. Thanks if can help me.

Upvotes: 10

Views: 20533

Answers (5)

Simran kaur
Simran kaur

Reputation: 31

export class AppComponent {
  constructor(db : AngularFireDatabase){
 db.list('/courses').valueChanges().subscribe()
  }
}

In Angular firebase version 5.0 and above .subscribe is available after .valuechanges()

Upvotes: 2

Mehmet Karakose
Mehmet Karakose

Reputation: 76

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs';

Import code the code,

 countries: Observable<any[]>;
 allCountries: any;

  constructor(db: AngularFireDatabase ) {
    this.countries = db.list('/yourpath').valueChanges();  
    this.countries.subscribe(countries => {
      this.allCountries = countries;
      console.log(this.allCountries);
    })
    console.log(this.countries)
  }

Upvotes: 1

alex
alex

Reputation: 655

A simpler change would to be add valueChanges() before .subscribe()

db.list('/Country/countries').valueChanges().subscribe(countries => {
    this.countries = countries;
    console.log(this.countries);
});

Upvotes: 20

George Ortiz
George Ortiz

Reputation: 11

Try the next:

export class AppComponent {
  countries: any[];

  constructor(db: AngularFireDatabase )
  {
      this.countries = db.list('/Country/countries').valuesChanges();
  }
}

And if you have a model then:

export class AppComponent {
  countries: Country[];

  constructor(db: AngularFireDatabase )
  {
     this.countries = db.list<Country>('/Country/countries').valueChanges();
  }
}

Upvotes: 0

James Daniels
James Daniels

Reputation: 6981

Starting in AngularFire 5.0 you'll want to use one of snapshotChanges(), valueChanges<T>(), stateChanges(), or auditTrail(). See the 5.0 migration guide.

Get started with the most basic, valueChanges():

export class AppComponent {
  countries: Observable<Country[]>;
  constructor(db: AngularFireDatabase ) {
    this.countries = db.list('/Country/countries').valueChanges();
  }
}

Upvotes: 27

Related Questions