CODEWITHSUNDEEP
javascriptangularfirebasefirebase-realtime-databaseobservable
Greg Sithole
Greg Sithole

Reputation: 145

Type 'Observable<{}[]>' cannot be converted to type 'AngularFireList<any[]>'

I'm pretty much new to Firebase and I was going through this course: https://scotch.io/tutorials/build-a-status-update-app-w-reactions-using-angular-v4-and-firebase but my issue is that this tutorial is out of date so there are some issues I encountered with Firebase

On the tutorial, there is a recent function that was used to get the most recent posts... previously the code looked like this: 

// ----------------------------------------------------------------------
// Method to get the recent statuses from Firebase
// ----------------------------------------------------------------------

recent(amount: number): FirebaseListObservable<any[]> {
  return this.statuses = this.af.list('/statuses').map(arr => arr.reverse()) as FirebaseListObservable<any[]>;
}

I later found out that FirebaseListObservable is outdated and now it's AngularFireList

So I changed my code to look like this

recent(amount: number): AngularFireList<any[]> {
  return this.statuses = this.af.list('/statuses').map(arr => arr.reverse()) as AngularFireList<any[]>;
}

I used a similar question from Property 'map' does not exist on type 'AngularFireList<{}>' and tried changing my code to: 

recent(amount: number): AngularFireList<any[]> {
  return this.statuses = this.af.list('/statuses').valueChanges().map(arr => arr.reverse()) as AngularFireList<any[]>;
}

Type 'Observable<{}[]>' cannot be converted to type 'AngularFireList<any[]>'.

Can anyone help me out?

Upvotes: 0

Views: 100

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38847

You would want to use map() as a pipeable operator with RxJS 5.5+. This would allow you to reverse the array returned from .list(). You should then be able to simply type it as an Observable<YourMagicType[]>:

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

recent(amount: number): Observable<YourMagicType[]> {
  return this.af.list<YourMagicType>('/statuses').valueChanges().pipe(
    map(arr => arr.reverse())
  );
}

Hopefully that helps!

Upvotes: 1

Related Questions