Как получить список пользователей, а также их UID из базы данных Firebase в реальном времени

Question

Я новичок в Angular и Firebase, поэтому, пожалуйста, помогите мне.Как я могу получить UID пользователя, а также получить весь список пользователей и показать его в ngFor, я использую https://github.com/angular/angularfire2/ для соединения с угловым

1 :

Answer 1

Полагаю, у вас есть несколько user объектов в узле /users. Чтобы получить доступ ко всему узлу /users в виде массива <User[]> или просто <any[]> со свойством пользователя id, попробуйте следующее, чтобы получить наблюдаемое, которое при подписке вернет массив с ключом (или идентификатором пользователя).

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let user of users$ | async">
         ID: {{ user.id}}
      </li>
    </ul>
  `,
})
export class AppComponent {
  users$: Observable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.users$ = db.list('users')
                     .snapshotChanges()
                     .pipe(map((users: any[]) => users.map(user => ({ id: user.key, ...user.payload.val() })))); 
  }
}

Использование метода snapshotChanges() возвращает значение данных узла firebase вместе с его метаданными, в отличие от valueChanges(), который возвращает только полезную нагрузку данных.

Таким образом, при использовании snapshotChanges() мы должны отобразить (не забудьте импортировать оператор map из rxjs/operators) снимок и для каждого объекта user в массиве отобразить дополнительное свойство id и получить доступ к автоматически назначенному ключу firebase со значением свойства key. Это, мы можем получить доступ в шаблоне при подписке.

Здесь для каждого объекта user в массиве мы присваиваем только id, используя key из метаданных, и сам объект user, используя оператор распространения .... Мы не использовали никаких других метаданных, просто чтобы сохранить свет объекта.

Я надеюсь, что это работает для вас.

Answer 2

Если вы ищете полный список пользователей, вы должны сделать следующее в соответствии с документацией angularfire2 .

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
       {{ item | json }}
    </li>
  </ul>
  `,
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('users').valueChanges();
  }
}

---

Если вы хотите получить только пользователя с UID = 0sv0em .... вам следует использовать запрос типа orderByChild с equalTo следующим образом:

db.list('/users', ref => ref.orderByChild('meta/name').equalTo('myName')).snapshotChanges()

, который отфильтрует список пользователей для пользователя с именем = 'myName'.

Самый простой способ продемонстрировать это - быстро адаптировать демонстрацию StackBlitz, которую вы найдете в документации angularfire2 (раздел «4. Запросы списков»), здесь .

Итак, перейдите к демонстрации StackBlitz ( здесь ) и измените следующие элементы:

1. Значение конфигурации в app.module.ts с вашей собственной конфигурацией Firebase
2. Строка № 21 в app.component.ts до следующего: size ? ref.orderByChild('meta/name').equalTo(size) : ref
3. Одна или несколько кнопок, присутствующих в app.component.html, например, <button (click)="filterBy('John')">John</button> если у вас есть пользователь по имени Джон.

Вы также можете адаптировать строку # 5 из app.component.html к {{ item.payload.val().meta.phone }} для отображения, например. телефон.

Я должен признать, что эта модификация StackBlitz немного быстрая и грязная, поскольку мы сохраняем имя переменной size, пока мы фильтруем name .... но она выполняет свою работу, показывая, как выполняется запрос с orderByChild() wor ks.