如何从Firebase实时数据库获取用户列表以及他们的UID

Question

我是Angular和Firebase的新手，所以请帮助我。我如何获取用户的UID并获取整个用户列表并在ngFor中显示，我正在使用https://github.com/angular/angularfire2/与angular连接

1：

Answer 1

如果要查找完整的用户列表，请按照angularfire2 documentation进行以下操作。

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'的用户。

最简单的演示方法是快速调整您在angularfire2文档（“ 4.查询列表”一节，here）中找到的StackBlitz演示。

因此，请转到StackBlitz演示（here）并修改以下元素：

1. 您自己拥有Firebase配置的app.module.ts中config的值
2. app.component.ts中位于以下位置的第21行：size ? ref.orderByChild('meta/name').equalTo(size) : ref
3. app.component.html中存在的一个或多个按钮，例如<button (click)="filterBy('John')">John</button>，如果您有一个名为John的用户。

您也可以将app.component.html的＃5行改成{{ item.payload.val().meta.phone }}以便显示，例如电话。

我必须承认，由于我们在过滤size时保留了name变量名，所以此StackBlitz修改有点快速且肮脏。显示orderByChild()的查询如何工作 ks。

Answer 2

我想您在user节点下有多个/users对象。要使用数组/users或使用用户<User[]>属性简单地<any[]>来访问整个id节点，请尝试以下操作以获取可观察到的值，即当订阅时将返回该数组带有密钥（或用户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，并使用key属性值访问自动分配的Firebase密钥。这样，我们可以在订阅后访问模板。

在此，对于数组中的每个user对象，我们仅使用元数据中的id分配key并使用{{ 1}}传播算子。我们没有使用任何其他元数据，只是为了保持对象明亮。

我希望这对您有用。