Ionic 3中如何从Firebase渲染特定条件的数据？

嘿，我来帮你搞定这个Firebase查询的问题！你已经能成功拉取全部用户数据了，那要实现按特定ID或者状态过滤的需求，其实只需要用好Firebase Realtime Database的查询API就行，下面分两种场景给你详细讲：

这里分两种情况，取决于你的数据结构：

情况1：ID是用户节点的键 #

如果你的Firebase数据结构是这样的（ID作为节点名称）：

users: {
  "some-id-123": {
    name: "张三",
    status: 1
  },
  "another-id-456": {
    name: "李四",
    status: 0
  }
}

那直接通过object()方法定位到对应节点即可，在你的用户提供者里添加这个方法：

// 导入必要的依赖（如果还没加的话）
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserProvider {

  constructor(private afDb: AngularFireDatabase) {}

  // 按节点ID查询单个用户
  getUserById(userId: string): Observable<any> {
    return this.afDb.object(`users/${userId}`).valueChanges();
  }
}

情况2：ID是用户对象的属性 #

如果每个用户对象里都有一个id字段（比如你自己存储的用户ID），数据结构像这样：

users: {
  "random-push-id-1": {
    id: "some-id-123",
    name: "张三",
    status: 1
  },
  "random-push-id-2": {
    id: "another-id-456",
    name: "李四",
    status: 0
  }
}

那就要用orderByChild()和equalTo()组合来过滤：

// 按用户对象里的id字段查询
getUserById(userId: string): Observable<any[]> {
  return this.afDb.list('users', ref => ref.orderByChild('id').equalTo(userId)).valueChanges();
}

这个需求同样用orderByChild() + equalTo()就能实现，在提供者里添加方法：

// 查询状态为1的活跃用户
getActiveUsers(): Observable<any[]> {
  return this.afDb.list('users', ref => ref.orderByChild('status').equalTo(1)).valueChanges();
}

重要提示：添加数据库索引 #

第一次执行这类查询时，Firebase控制台可能会提示你需要创建索引，否则查询效率会很低。你只需要按照提示，在Firebase控制台的数据库规则里添加索引配置即可：

{
  "rules": {
    "users": {
      ".indexOn": ["status", "id"] // 把你需要查询的字段都加在这里
    }
  }
}

以查询活跃用户为例，在你的页面TS文件里注入用户提供者，然后获取数据：

import { Component, OnInit } from '@angular/core';
import { UserProvider } from '../../providers/user/user';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-active-users',
  templateUrl: 'active-users.html',
})
export class ActiveUsersPage implements OnInit {

  // 用Observable配合async管道，不用手动管理订阅
  activeUsers$: Observable<any[]>;

  constructor(private userProvider: UserProvider) {}

  ngOnInit() {
    this.activeUsers$ = this.userProvider.getActiveUsers();
  }
}

然后在HTML里渲染：

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let user of activeUsers$ | async">
      <h2>{{user.name}}</h2>
      <p>用户ID：{{user.id || user.$key}}</p>
      <p>状态：{{user.status}}</p>
    </ion-item>
  </ion-list>
</ion-content>

如果是查询单个用户，HTML里可以直接绑定数据（记得处理空值情况）：

<ion-content padding *ngIf="user$ | async as user">
  <h1>{{user.name}}</h1>
  <p>状态：{{user.status}}</p>
</ion-content>

这样就能完美实现你要的“按ID查询”和“按状态过滤”的效果啦！

内容的提问来源于stack exchange，提问作者metalhead101