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 个用户）。

名字： - 姓氏： - 点数：

名字： - 姓氏： - 点数：

名字： - 姓氏： - 点数：

名字： - 姓氏： - 点数：

名字： - 姓氏： - 点数：

名字： - 姓氏： - 点数：

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

在此先感谢您的帮助 ！

Answer 1

使用value事件：tableau:any[] = [];getRanking(){&nbsp; firebase.database().ref('/users').orderByChild('ptsTotal')&nbsp; .on('value',(data)=>{&nbsp; data.forEach((childSnapshot) => {&nbsp; &nbsp; var childData = childSnapshot.val();&nbsp; &nbsp; this.tableau.push(childData);&nbsp; &nbsp;});});然后使用forEach()循环内部数据，然后将数据添加到数组tableau中，并在 html 中使用它。