反转 angularfire2 中的可观察数组 angular 6

Question

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 inte.net 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()}))
       )
      ) ;
  }

Answer 1

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.

Answer 2

you can use ---

*ngFor="let item of items.slice().reverse()"

Answer 3

Reversing an Observable or an Array inside template is possible but not recommended at all . Do not bring any sort of JavaScript function's logic inside html template.

WHY

1- It will work in development but in production it will not reverse the array.

2- It is the incorrect use of Angular Framework. As you are mutating an array inside of change detection cycle .

Refrence https://github.com/angular/angular/issues/34131

Solution You should reverse your array inside Ts .

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).slice().reverse())
    );
  }

ZOOMED new Card()

new Card(cardObj.key, cardObj._frontImageUrl, cardObj._backImageUrl,
    cardObj._status, cardObj._date, cardObj._userId, cardObj._message).slice().reverse()