Angular 4 Firebase 操作 Observable 的 *ngFor 或在 Observable 中使用索引答案

【问题标题】：Angular 4 Firebase manipulate *ngFor of Observable or use index in an ObservableAngular 4 Firebase 操作 Observable 的 *ngFor 或在 Observable 中使用索引
【发布时间】：2018-01-22 14:03:06
【问题描述】：

我正在使用 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>

其中 unknown 将被替换为正确的 topusers observable 索引。我想要的是将*ngFor="let topuser of topusers | async" 控制为 10 个顶级用户，这样我就可以将第一个、第二个等放在他们身上。我几乎到处搜索，但找不到任何关于如何在 html 代码上使用 Observable 上的特定索引的帮助。

【问题讨论】：

标签： javascript angular typescript firebase angularfire

【解决方案1】：

可以使用 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

这里有一篇文章演示了 ngFor 索引变量：https://coryrylan.com/blog/angular-ng-for-syntax

【讨论】：