5

I've read every question on SO about this and I still haven't found an answer to this. So don't mark this as a duplicate.

I'm using AngularFire with Angular 2 and Typescript. I'm using FirebaseListObservable to pull a list of the 24 most recent records from an endpoint. Here's my code:

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'story-list',
  templateUrl: './story-list.component.html',
  styleUrls: ['./story-list.component.scss']
})
export class StoryListComponent {
  stories: FirebaseListObservable<any[]>;

  constructor(af: AngularFire) {
    this.stories = af.database.list('/stories', {
      query: {
        limitToLast: 24
      }
    });
  }
}

This returns a list of the 24 latest stories, as expected, but when I render them on the page with:

<p *ngFor="let story of stories | async">{{ story.title }}</p>

It shows the oldest story on the top, and the newest on the bottom. I understand why this is, and I'm not claiming it's an issue, but how would I reverse this? I'd like to be able to reverse this in the query, but if that's not possible, I'd be open to somehow reversing it in the rendering.

Whatever your answer is, please don't just link to documentation. There is no documentation for AngularFire that fully explains this. I've read every word. Please provide real working code.

One solution that I absolutely will not accept, however, is storing a negative date in the records at the time of creation and then sorting based on that. That is the worst solution I've ever heard, and a real database system would allow you to do this in the query. So please don't even suggest it.

If you have any ideas, I would greatly appreciate it. I would hate to have to use another product because I love Firebase.

adjuremods
  • 2,938
  • 2
  • 12
  • 17
Kyle Morgan
  • 660
  • 1
  • 11
  • 21

1 Answers1

18

As far as I'm aware, the Firebase queries are always in ascending order.

However, you can reverse the ordering of the rendered list using the map operator to reverse the array that's emitted by the AngularFire2 observable:

import "rxjs/add/operator/map";

...

this.stories = af.database.list('/stories', {
  query: {
    limitToLast: 24
  }
}).map((array) => array.reverse()) as FirebaseListObservable<any[]>;

If you'd prefer to do it in the template, you could have a look at this answer.

Community
  • 1
  • 1
cartant
  • 57,105
  • 17
  • 163
  • 197
  • I like the first approach, but it results in an error `Property 'map' does not exist on type 'FirebaseListObservable'`. – Kyle Morgan Oct 27 '16 at 21:40
  • I think the issue is that FirebaseListObservable isn't an array, so you can't perform array-like operations on it. – Kyle Morgan Oct 27 '16 at 21:41
  • It will work; the emitted value is an array. It's just a TypeScript/RxJS issue. It's likely you will need to import the `map` operator to appease TypeScript. I've updated the answer. – cartant Oct 27 '16 at 21:43
  • Now I get the error: `Type 'Observable' is not assignable to type 'FirebaseListObservable'. Property '_ref' is missing in type 'Observable'.` – Kyle Morgan Oct 27 '16 at 21:44
  • More TypeScript. It does not play terribly nice with RxJS's `lift` function that's used to chain operators. Added a cast to the answer. – cartant Oct 27 '16 at 21:46
  • Holy crap, it finally works! Thanks for your answer! – Kyle Morgan Oct 27 '16 at 21:47
  • I still get this error `Property 'map' does not exist on type 'FirebaseListObservable'.` I already import `"rxjs/add/operator/map"` – alltej Mar 07 '17 at 13:39
  • you're amazing :) my imports import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database' import { AngularFireAuth } from 'angularfire2/auth' import { Observable } from 'rxjs/Observable' import * as firebase from 'firebase/app' – bresleveloper Oct 10 '17 at 00:49