Angular 4 Firebase操纵* ngFor的Observable或在Observable中使用索引

我正在使用带有Firebase数据库的Angular 4。在我的应用程序中，我想在浏览器上显示前十名用户的排行榜。我使用我的component.tsAngular 4 Firebase操纵* ngFor的Observable或在Observable中使用索引

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 users.However我希望结果显示像这个例子：

<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>

凡未知将被替换为正确的topusers可观察的指数。我想要的是将*ngFor="let topuser of topusers | async"控制为10个热门用户，这样我就可以将第一，第二等等留在他们身上。我几乎到处搜索，但无法找到任何帮助如何使用HTML代码上的Observable上的特定索引。

来源

2017-08-14 Zekelonas

可以使用ngFor指令

<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]; 
    } 
}

这里是一个工作plunkr：https://plnkr.co/edit/trvaibgJb9v2IKreN3uY?p=preview

下面是一个文章demoing的ngFor索引变量：https://coryrylan.com/blog/angular-ng-for-syntax

来源

2017-08-14 18:23:00 LLai

Angular 4 Firebase操纵* ngFor的Observable或在Observable中使用索引

回答

相关问题