Angular4 Firebase FirebaseList要在html上显示的可观察控制索引

Question

我想在我的应用程序中创建一个排行榜。因此，我需要从Firebase数据库中读取名称和总分信息，并在浏览器上显示它们。 我的目标是在浏览器上显示类似的东西，但当然用数据库用户名和最高分替换未知。

排行榜

首页：未知，最高分：未知

第二名：未知，最高分：未知

第三：未知

，最高分：未知

第四：未知

，最高分：未知

第五：未知

，最高分：未知

我的火力数据库是：

"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 方法反转从可观测的 Firebase 返回数据的顺序

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 的数组是相反的。