[英]Angular 4 Firebase manipulate *ngFor of Observable or use index in an Observable
我正在将Angular 4与Firebase数据库一起使用。在我的应用中,我想在浏览器中显示前十名用户的排行榜。 我在我的component.ts上使用此代码
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();})
}
和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>
一切正常,我获得了前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>
未知的地方将用可观察到的正确的topuser索引代替。 我想要的是将*ngFor="let topuser of topusers | async"
为10个topusers,以便我可以将First,Second等。 我搜索了几乎所有地方,但是找不到有关如何在html代码上的Observable上使用特定索引的任何帮助。
您可以使用ngFor指令的index变量
<div *ngFor="let item of observable$ | async; let i = index">
<li> {{i + 1 | ordinalString}} {{ topuser.username | json }}:{{ topuser.totalscore | json }} </li>
</div>
然后通过管道运行索引以获取所需的字符串。
@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];
}
}
这是一个工作的插件: https ://plnkr.co/edit/trvaibgJb9v2IKreN3uY ? p = preview
这是一篇演示ngFor索引变量的文章: https ://coryrylan.com/blog/angular-ng-for-syntax
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.