Angular4 Firebase FirebaseListObservable控件索引要在html上顯示

Question

我想在應用程序中創建排行榜。因此，我需要從Firebase數據庫中讀取名稱和totalscores信息，並在瀏覽器中顯示它們。 我的目標是在瀏覽器上顯示像這樣的東西，但當然用數據庫用戶名和頂級內容替換未知。

排行榜

首先：未知，最高分數：未知

二：未知，最高分數：未知

三：未知，最高分數：未知

四：未知，最高分數：未知

第五名：未知，頂級：未知

我的火力數據庫是：

"users" : { 
    "Test1" : { 
     "totalscore" : 50, 
     "username" : "test1" 
    }, 
    "Test2" : { 
     "totalscore" : 30, 
     "username" : "test2" 
    }, 
    "Test3" : { 
     "totalscore" : 20, 
     "username" : "test1" 
    }, 
    "Test4" : { 
     "totalscore" : 10, 
     "username" : "test1" 
    }, 
    "Test5" : { 
     "totalscore" : 50, 
     "username" : "test1" 
    }, 
    "Test6" : { 
     "totalscore" : 30, 
     "username" : "test2" 
    }, 
    "Test7" : { 
     "totalscore" : 20, 
     "username" : "test1" 
    }, 
    "Test8" : { 
     "totalscore" : 10, 
     "username" : "test1" 
    } 
    } 

用下面的代碼，我可以得到我想要的東西倒信息。

topusers: FirebaseListObservable<any>; 
    constructor(db: AngularFireDatabase) { 


     this.topusers = db.list('users', { 
     query: { 
     orderByChild: "totalscore", 
     limitToLast: 10, 
     } 
     }); 
    } 

最後使用* ngFor我可以顯示從第五個到第一個5個頂級。

<ul *ngFor="let topuser of topusers | async"> 
    <li class = "white" > 
     {{ topuser.username | json }}: 
     {{ topuser.totalscore | json }}   
    </li> 
</ul> 

我的問題是有沒有辦法來控制* ngFor所以不是從列表中的第一個指數開始從去年開始，在首先結束？ 還是有無論如何，我可以控制我想要在瀏覽器上顯示的FirebaseListObservable的索引？

Answer 1

您不一定要操縱ngFor的順序，而是操縱正在傳入ngFor的數據。您可以反向從火力點觀察到的返回與.MAP方法

topusers: Observable<any>; // use Observable<> instead of FirebaseListObservable<> since .map is an rxjs method that returns the type Observable 

constructor(){ 
    this.topusers = db.list('users', { 
     query: { 
      orderByChild: "totalscore", 
      limitToLast: 10, 
     } 
    }) 
    .map(res => res.reverse()); 
} 

所以，現在的陣列傳遞給ngFor反向數據的順序。