使用 orderByChild 难以在 Angular 中显示我的 firebase 数据

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[] = [];

  constructor(private usersService: UsersService) { }

  ngOnInit(): void {
    this.getRanking();
    //1
    console.log(this.usersRanking);
  }

  getRanking(){
    firebase.database().ref('/users').orderByChild('ptsTotal')
    .on('child_added',(data)=>{
          this.usersRanking = data.val() ? data.val() : [];
          //2
          console.log(this.usersRanking);
      });
  }
}

第一个奇怪的事情。结果与我询问用户列表时的形状不同（没有 orderByChild）。返回结果在 4 中是分开的（因为我有 4 个用户）与用户列表一样，我的所有用户只有 1 个对象。

这是获取我的用户列表的功能。我使用 users:User[] 和 emitUsers() 是用 rxjs 做一个 Observable。

  getUsers(){
    firebase.database().ref('/users')
    .on('value',(data)=>{
      this.users = data.val() ? data.val() : [];
      this.emitUsers();
    });
  }

第二个奇怪的事情。我的第二个 console.log() 显示 4 个结果与第一个 console.log() 一样（ngOnInit 中的一个只显示一个结果（我的用户得分最多）。

第三个奇怪的事情。我的 HTML 不工作。我使用 ngFor，页面上的结果是 6 行（我只有 4 个用户）。当我使用相同的方法仅显示我的用户（无顺序）时，此 Html 正在工作

名字：-姓氏：-点数：

名字：-姓氏：-点数：

名字：-姓氏：-点数：

名字：-姓氏：-点数：

名字：-姓氏：-点数：

名字：-姓氏：-点数：

（下面的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>

提前感谢您的帮助！

Answer 1

如果我理解正确，您的第一个问题是由您使用的侦听器类型不同引起的。

第一个：

firebase.database().ref('/users').orderByChild('ptsTotal')
.on('child_added',(data)=>{
      this.usersRanking = data.val() ? data.val() : [];
      console.log(this.usersRanking);
  });

您在此处观察child_added，这意味着您的回调会针对与查询匹配的每个单独子节点（最初针对每个子节点，然后每次添加子节点时）调用。

你的第二个听众是：

firebase.database().ref('/users')
.on('value',(data)=>{
  this.users = data.val() ? data.val() : [];
  this.emitUsers();
});

您在这里侦听value 事件，这意味着您的代码会被调用并使用所有结果的一个快照（最初一次，然后每个结果都有变化）。

因此，每种格式看起来都不同是有道理的，因为您会获得不同级别的结果。如果你想在 value 监听器中看到相同类型的数据，你可以这样做：

firebase.database().ref('/users')
.on('value',(data)=>{
  data.forEach((snapshot) => {
    console.log(snapshot.val());
  })
});

在此处使用data.forEach() 也是确保您按照请求顺序查看值的关键。没有那个 data.val() 实际上会处于未定义的顺序，因为 JSON 中的字段没有定义的顺序。