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

Question

我正在使用一个 Observable 数组来获取实时数据。 数据按升序排列，但我需要它以相反的顺序显示。 inte.net 上的示例在 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()}))
       )
      ) ;
  }

Answer 1

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

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

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

Answer 2

您可以使用 - -

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

Answer 3

在模板中反转 Observable 或 Array 是可能的，但根本不推荐。 不要在 html 模板中引入任何类型的JavaScript function's logic 。

为什么

1-它会在development中工作，但在production中它不会反转数组。

2-这是 Angular 框架的错误使用。 当您在change detection cycle内mutating数组时。

参考https ://github.com/angular/angular/issues/34131

解决方案您应该在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())
    );
  }

放大new Card()

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