Ionic＆AngularFireDatabase列表结果-类型“ {}”上不存在属性“ map”

Question

I am trying to get data from Firebase by the list function and to use it in Json format (to load markers on my Google Map). But I'm facing an issue with the returned snapshots : Property 'map' does not exist on type '{}'

My imports:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

And the code snippet with the error:

markers: Observable<any[]>;
constructor(public navCtrl: NavController, 
      public geolocation: Geolocation, 
      public db: AngularFireDatabase) { 

        this.markers = this.db.list("empresa/", {preserveSnapshot: true})
          .map(snapshots => {
            return snapshots.map(snapshot => { // this second .map displays the error
              return snapshot.val();    
            })
            .subscribe((marcas)=> {
              console.log(marcas);
            });
        });
      }

Because of this, I think, the subscribe does not display anything on the console. I also tried to import in some different ways the rxjs, as in this link Property 'map' does not exist on type 'Observable<Response>' , but without success.

Answer 1

Seems like a migration issue - since AF 5.0 list returns an AngularFireList<T> service, not FirebaseListObservable , you have to call an action on it to stream data into an observable collection, eg:

    const subscription = this.db.list("empresa/").snapshotChanges()
      .map(snapshots => {
        return snapshots.map(snapshot => snapshot.payload.val());
      })
      .subscribe(values => {
        console.log(values);
        this.markers = values;
      });

Note also that the subscribe is chained after the outer map , not the inner as in your example; and this.markers are being assigned results inside the subscription, so you have to change their type from Observable<any[]> to any[] (or whatever they are, just not observable).

See 3. Retrieving data as lists in the docs for details; there's an example at the end of the page on using the listed items inside an angular template with async pipe, where you don't need to subscribe , then you'd keep this.markers as Observable<any[]> and the rest would be:

this.markers = this.db.list("empresa/").snapshotChanges()
  .map(snapshots => {
    return snapshots.map(snapshot => snapshot.payload.val());
  });

This is preferred as the async pipe manages the subscription for you (because if you are subscribing manually you should also unsubscribe ).