Firebase - Angular / 我无法使用 orderByChild 方法显示我的结果

Question

我有一个这样组织的用户数据库：

Database
 - Users
  - Id (determined thanks to the push method)
    - email
    - firstName
    - ptsTotal
    - ...

我想使用 orderByChild 方法根据 ptsTotal（游戏中的点数）建立我的用户排名。

下面是我在 Angular 中的组件：

import { Component, OnInit } from '@angular/core';
import {UsersService} from '../../services/users.service';
import {User} from '../../models/user.model';
import * as firebase from 'firebase';

@Component({
  selector: 'app-total',
  templateUrl: './total.component.html',
  styleUrls: ['./total.component.scss']
})
export class TotalComponent implements OnInit {

  usersRanking:User[] = [];
  tableau:any[];

  constructor(private usersService: UsersService) { }

  ngOnInit(): void {
    this.getRanking();
  }

  getRanking(){
    firebase.database().ref('/users').orderByChild('ptsTotal')
    .on('value',(data)=>{
      data.forEach((childSnapshot) => {
        var childData = childSnapshot.val();
            this.tableau.push(childData);

      });

    });
}
}

这是我在控制台中的输出

我的 Html 无法正常工作。我使用 ngFor，页面上的结果是 6 行（我只有 4 个用户）。

名字：-姓氏：-点数：

名字：-姓氏：-点数：

名字：-姓氏：-点数：

名字：-姓氏：-点数：

名字：-姓氏：-点数：

名字：-姓氏：-点数：

（下面的HTML代码）

<div class="row">
  <div class="col-xs-12">
    <h2>Users Ranking</h2>
    <div class="list-group"
        *ngFor="let user of usersRanking | keyvalue async">
        <p>firstName : {{user.value.firstName}} - LastName : {{user.value.lastName}} - Number of Points : {{user.value.ptsTotal}}</p>
    </div>
  </div>
</div>

提前感谢您的帮助！

P.S：这是我使用“value”而不是“child_added”时的控制台。我的用户没有被订购：

Answer 1

使用value 事件：

tableau:any[] = [];

getRanking(){
  firebase.database().ref('/users').orderByChild('ptsTotal')
  .on('value',(data)=>{
  data.forEach((childSnapshot) => {
    var childData = childSnapshot.val();
    this.tableau.push(childData);
   });
});

然后使用forEach()循环内部数据，然后将数据添加到数组tableau中，并在html内部使用。