Ad
Reverse An Observable Array In Angularfire2 Angular 6
I am using a Observable array for real time data coming. The data comes in ascending order, but I need it to display in reverse order. Examples on internet are before angular 5 and the syntax no longer works. Please advise
html
<tr *ngFor="let card of cards | async;let last = last ">
<td> <img [src]="card.frontImageUrl" width=200 height="100"></td>
</td>
refreshCards(){
this.cards = this.dataSvc.fetchCards().pipe(
map((cards: any) => cards.map(cardObj => new Card(cardObj.key, cardObj._frontImageUrl, cardObj._backImageUrl, cardObj._status, cardObj._date, cardObj._userId, cardObj._message)))
);
}
call to firedb
fetchCards(){
this.cardList = this.db.list<Card>('adminCardQueue', ref => ref.orderByChild('_date').limitToLast(50))
return this.cardList.snapshotChanges().pipe(
map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val()}))
)
) ;
}
Ad
Answer
You can reverse the array at *ngFor using .slice().reverse()
<tr *ngFor="let card of (cards | async)?.slice().reverse();let last = last ">
The .slice() creates a copy of the array and the .reverse() does the reverse action on your array.
Ad
source: stackoverflow.com
Related Questions
- → How can I query Firebase for an equalTo boolean parameter?
- → How can I access nested data in Firebase with React?
- → Firebase simple blog (confused with security rules)
- → Removing item in Firebase with React, re-render returns item undefined
- → AngularJS Unknown Provider Error (Firebase & AngularFire)
- → How do you pass top level component state down to Routes using react-router?
- → "this" is null in firebase query function in reactjs
- → Angular Module Failed to Load
- → Multiple dex files define Lcom/google/android/gms/internal/zzrx;
- → Joining Firebase tables in React
- → How can I make add firepad to my reactjs project?
- → How to use Cloud Functions for Firebase to prerender pages for SEO?
- → React.js component has null state?
Ad