Angular 2 - 添加新项目后如何反转firebase列表[重复]

Question

我正在寻找一种方法来实时反转我的 firebase 列表。

例如：我得到了这个 firebase 列表：

{苹果、橙子、香蕉}; == 反转后 => {香蕉、橙子、苹果}

如果我添加新项目（不刷新页面），我的列表应该是这样的：

{苹果，橙子，香蕉，其他} == 颠倒 => {其他，香蕉，橙子，苹果}

我使用此代码尝试反转列表但出现错误：

    <div *ngFor="let f of fruitsList | reverse async">

我也检查了这个，但列表没有反转

    <div *ngFor="let f of fruitsList | async reverse">

我检查了这个链接 [ https://stackoverflow.com/questions/40293539/is-it-possible-to-reverse-a-firebase-list ] 但不是我想要的

当我运行应用程序时很好，但是当我添加任何新项目时，列表显示为图片。

注意：FruitList 定义为

    Public fruitList: FirebaseListObservable<any[]>

Answer 1

试试

<div *ngFor="let f of fruitsList.reverse() | async ">

谢谢， 哦

这适用于简单的数组。对于 FireBaseObservable，你会想做这样的事情（取自这里 https://angularfirebase.com/snippets/how-to-reverse-an-observable-array-in-angular-angularfire2-firebaselistobservable/）创建这样的管道

    import { Pipe, PipeTransform } from '@angular/core';    
    @Pipe({
         name: 'reverse'
     })
     export class ReversePipe implements PipeTransform {

     transform(value) {

     if (!value) return;
             return value.reverse();
        }
    }

并像这样使用它

    <div *ngFor="let f of fruitsList | async | reverse">