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反向数据的顺序。