Angular 2 - 如何在添加新項目後逆轉Firebase列表

Question

我正在尋找一種實時逆轉我的Firebase列表的方法。

例如：我得到這個火力列表：

{apple, orange, banana}; == After reverse => {banana, orange, apple}

如果我增加新項目（不刷新頁面），我的名單應該是這樣的：

{apple, orange, banana, other} == reversed => {other, banana, orange, apple}

我使用此代碼嘗試反轉列表，但出現錯誤：

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

而且我檢查這一項，但名單沒有扭轉

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

我檢查這個鏈接[Is it possible to reverse a Firebase list?]，但不是因爲我想

這是很好，當我運行應用程序，但是當我添加任何新項目列表顯示爲圖片。

Img for list after adding new item

注：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">