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(){

  firebase.database().ref('/users').orderByChild('ptsTotal')

  .on('value',(data)=>{

  data.forEach((childSnapshot) => {

    var childData = childSnapshot.val();

    this.tableau.push(childData);

   });

});

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