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

【问题标题】：reverse an observable array in angularfire2 angular 6反转angularfire2 angular 6中的可观察数组
【发布时间】：2019-04-12 05:20:37
【问题描述】：

我正在使用 Observable 数组来获取实时数据。数据按升序排列，但我需要它以相反的顺序显示。互联网上的示例在 angular 5 之前，语法不再有效。请指教

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)))
    );
  }

调用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()}))
       )
      ) ;
  }

【问题讨论】：

嘿，您是否尝试过使用 .slice().reverse() 在 *ngFor 处反转数组？例如：let card of (posts | async)?.slice().reverse()
太棒了。你没有使用 .slice() 添加有效
让我把它放在一个可见的答案中

标签： firebase firebase-realtime-database angularfire2

【解决方案1】：

你可以在 *ngFor 使用 .slice().reverse() 反转数组

<tr *ngFor="let card of (cards | async)?.slice().reverse();let last = last ">

.slice() 创建数组的副本，.reverse() 对数组执行反向操作。

【讨论】：

【解决方案2】：

你可以使用---

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

【讨论】：