Трудности с отображением моих данных firebase в Angular с помощью ordeyByChild

Question

У меня есть база данных для моих пользователей, организованная следующим образом:

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

Я хочу использовать метод orderByChild для sh ранжирования моих пользователей в соответствии с 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);
      });
  }
}

1-я странная вещь. Результаты имеют другую форму, чем когда я спрашиваю свой список пользователей (без orderByChild). Результат возврата разделен на 4 (потому что у меня 4 пользователя), как и в случае со списком пользователей, у меня есть только 1 объект со всеми моими пользователями.

Это функция для получения моего списка пользователей. Я использую пользователей: User [] и emitUsers () должны выполнять Observable с помощью rx js.

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

2nd Weird вещь. Мой второй console.log () отображает 4 результата как 1-й console.log () (тот, который в ngOnInit отображает только один результат (мой пользователь с наибольшим количеством очков).

Третья странная вещь. Мой Html не работает. Я использую ngFor, и результат на моей странице составляет 6 строк (а у меня всего 4 пользователя). Этот Html работает когда я использую тот же метод, чтобы просто отображать своих пользователей (без порядка)

firstName: - LastName: - Количество баллов:

firstName: - LastName: - Количество баллов:

firstName: - LastName: - Количество баллов:

firstName: - LastName: - Количество баллов:

firstName: - LastName: - Количество баллов:

firstName: - LastName: - Количество баллов:

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