Javascript Angular 4 Firebase操纵*ngFor的可观测值或在可观测值中使用索引
我正在使用Angular 4和Firebase数据库。在我的应用程序中,我想在浏览器上显示前十名用户的排行榜。 我在component.ts上使用此代码Javascript Angular 4 Firebase操纵*ngFor的可观测值或在可观测值中使用索引,javascript,angular,typescript,firebase,angularfire,Javascript,Angular,Typescript,Firebase,Angularfire,我正在使用Angular 4和Firebase数据库。在我的应用程序中,我想在浏览器上显示前十名用户的排行榜。 我在component.ts上使用此代码 export class HomefillerComponent implements OnInit { topusers: Observable<any>; constructor(db: AngularFireDatabase,public authService: AuthService) { thi
export class HomefillerComponent implements OnInit {
topusers: Observable<any>;
constructor(db: AngularFireDatabase,public authService: AuthService) {
this.topusers = db.list('users', {
query: {
orderByChild: "totalscore",
limitToLast: 10,
}
}).map((topusers) => {console.log(topusers);
return topusers.reverse();})
}
导出类HomefillerComponent实现OnInit{
顶级用户:可观察;
构造函数(db:AngularFireDatabase,公共authService:authService){
this.topusers=db.list('users'{
查询:{
orderByChild:“totalscore”,
最后:10,
}
}).map((topusers)=>{console.log(topusers);
返回topusers.reverse();})
}
以及html代码:
<a class="btn btn-download nav-item vlink dropdown-toggle pointer " data-toggle="dropdown">Leaderboard</a>
<ul class="dropdown-menu text-center list">
<ul *ngFor="let topuser of topusers | async">
<li> {{ topuser.username | json }}:{{ topuser.totalscore | json }} </li>
</ul>
</ul>
</div>
排行榜
- {{topuser.username | json}}:{{{topuser.totalscore | json}
一切正常,我得到了前10个用户。但我希望结果显示如下示例:
<ul>
<li><span>First:</span><span>Unknow</span></li>
<li><span >Second:</span><span>Unknow</span></li>
<li><span >Third:</span><span >Unknow</span></li>
<li><span >Fourth:</span><span>Unknow</span></li>
<li><span >Fifth</span><span>Unknow</span></li>
...etc...
</ul>
- 第一:未知
- 第二:未知
- 第三:未知
- 第四:未知
- 菲芬克诺
等
其中“未知”将替换为可观察的顶级用户的正确索引。
我想要的是将
*ngFor=“let topuser of topusers | async”
控制为10个topusers,这样我就可以把第一个、第二个等放在它们上面。我几乎搜索了所有地方,但找不到任何关于如何在html代码的可观察对象上使用特定索引的帮助。您可以使用ngFor指令的Index变量
<div *ngFor="let item of observable$ | async; let i = index">
<li> {{i + 1 | ordinalString}} {{ topuser.username | json }}:{{ topuser.totalscore | json }} </li>
</div>
这是一个工作的PRUNKR:
下面是一篇演示ngFor索引变量的文章:
@Pipe({name: 'ordinalString'})
export class OrdinalStringPipe implements PipeTransform {
// super simple ordinal string method
transform(index: number): string{
let ordinalStrings = ['Zero', 'First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth', 'Seventh', 'Eighth', 'Ninth', 'Tenth'];
return ordinalStrings[index];
}
}