CODEWITHSUNDEEP
javascriptangularfirebaseionic-frameworkfirebase-realtime-database
ExO
ExO

Reputation: 21

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

I'm having a tough time trying to figure this one out. I get the following error when I run Ionic Serve:

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

I have searched for a fix for some time and can't find anything that has worked, so here I am. Current versions are:

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.9
Angular Core: 5.0.1
Angular Compiler CLI: 5.0.1
Node: 9.11.1

I have worked out all the other bugs and migrated everything to newer versions (changing Firebase listings to Angular.)

The code that throws the error is the .map() object, here:

afDB.list('/feed').map((feeds) =>

This is my code:

import { Component  } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController , 
LoadingController} from 'ionic-angular';
import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import 'rxjs/add/operator/map'; // you might need to import this, or not 
depends on your setup

@IonicPage()
@Component({
  selector: 'page-feed',
  templateUrl: 'feed.html'
})

export class FeedPage {

  feeds: AngularFireList<any[]>;
  feedView: string = "activity";

  constructor(public navCtrl: NavController, public navParams: NavParams ,public modalCtrl: ModalController,public loadingCtrl: LoadingController, public     afDB: AngularFireDatabase) {

    let loadingPopup = this.loadingCtrl.create({
      spinner: 'crescent',
      content: ''
    });
    loadingPopup.present();
    this.feeds = <AngularFireList<any[]>> afDB.list('/feed').map((feeds) => {
          return feeds.map((feeds) => {
              feeds.images = afDB.list('/feed/'+feeds.$key+'/images')
              loadingPopup.dismiss().catch(() => console.log('ERROR CATCH: LoadingController dismiss'));
              return feeds                      
          })
      }) 
  }
}

I am learning so if the answer is obvious, please explain it. Thanks in advance.

Upvotes: 2

Views: 1409

Answers (2)

ExO
ExO

Reputation: 21

We seem to have fixed it by doing the following - and by we, I mean all credit goes to my friend R. Jackson.

First, I added this to the imports

import {Observable} from 'rxjs/Observable'

Next, under the exports section, I the line:

feeds: AngularFireList; to feeds: Observable;

then, putting those changes into play

this.feeds = afDB.list('/feed').valueChanges().map((feeds:any)

This no long throws any errors and serves without any hiccups.

Upvotes: 0

Adrian F&#226;ciu
Adrian F&#226;ciu

Reputation: 12552

When you call list method on AngularFireDatabase you get back an AngularFireList. Even though there is List in the name it's not an array or a stream that would have the map method.

This is the definition for this type (you can see this by using go to definition on the AngularFireList in your editor or by browsing the code source):

export interface AngularFireList<T> {
  query: DatabaseQuery;
  valueChanges(events?: ChildEvent[]): Observable<T[]>;
  snapshotChanges(events?: ChildEvent[]): Observable<SnapshotAction[]>;
  stateChanges(events?: ChildEvent[]): Observable<SnapshotAction>;
  auditTrail(events?: ChildEvent[]): Observable<SnapshotAction[]>;
  update(item: FirebaseOperation, data: T): Promise<void>;
  set(item: FirebaseOperation, data: T): Promise<void>;
  push(data: T): ThenableReference;
  remove(item?: FirebaseOperation): Promise<void>;
}

In order to get the stream you need to use one of the methods returning an Observable, and assuming you want the values that would be valueChanges. So your code should be something like:

afDB.list('/feed').valueChanges.map(...)

And the result would be a stream, meaning Observable<any>. This means that in the template you would need to use the Async pipe.

Upvotes: 2

Related Questions