How do I iterate in reverse with *ngFor directive?-CodePudding

In angular, I am trying to query Firebase and i would like when the objects come back, the content is iterated through, in reverse.

In TS I got this

 this.items = db.list('/items', ref => ref.limitToLast(10)).valueChanges();

I tried using reverse() on there, but, i get an errors saying "Reverse does not exist on type Observerable"

In the HTML i have this

*ngFor="let item of items | async | slice:0:100"

How can i get this done ?

CodePudding user response：

You can use RxJS operator map with pipe to transform the final emitted values:

this.items = db.list('/items', ref => ref.limitToLast(10)).valueChanges().pipe(map(values => values.reverse());

CodePudding user response：

valueChanges() returns an Observable that wraps the underlying data array. In order to reverse the underlying data array you may pipe the Observable through the map RxJS operator and return the reversed array.

this.items = db.list('/items', ref => ref.limitToLast(10)).valueChanges()
                     .pipe(
                     map(values => values.reverse())
                     );