Ionic 3中如何通过Firestore查询并展示匹配邮箱的列表数据？

嘿，作为Ionic 3和Firestore的新手，碰到这种查询问题真的太常见啦！我来一步步帮你实现用邮箱过滤子字段并展示列表的需求～

第一步：接收页面传递的邮箱参数 #

首先咱们得先拿到上一个页面传过来的邮箱，在Ionic 3里用NavParams就能轻松搞定：

import { Component, OnDestroy } from '@angular/core';
import { NavParams } from 'ionic-angular';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable, Subscription } from 'rxjs';

// 定义文档类型（可选，但能让代码更清晰）
interface UserData {
  user: {
    email: string;
  };
  // 这里可以添加你的文档其他字段
}

@Component({
  selector: 'page-user-list',
  templateUrl: 'user-list.html'
})
export class UserListPage implements OnDestroy {
  private usersCollection: AngularFirestoreCollection<UserData>;
  users: UserData[] = [];
  receivedEmail: string;
  private usersSub: Subscription;

  constructor(
    public navParams: NavParams,
    private afs: AngularFirestore
  ) {
    // 获取上一页传递的邮箱参数
    this.receivedEmail = this.navParams.get('email');
    // 初始化Firestore查询
    this.initFirestoreQuery();
  }
}

第二步：编写Firestore子字段查询 #

这是核心环节！Firestore支持用点符号访问文档里的子字段，假设你的文档结构是{ user: { email: "xxx@example.com" } }，查询代码就这么写：

initFirestoreQuery() {
  // 假设你的集合名叫"users"，根据实际情况修改
  this.usersCollection = this.afs.collection<UserData>('users', ref => 
    ref.where('user.email', '==', this.receivedEmail)
  );
  
  // 订阅查询结果，把数据赋值给本地数组
  this.usersSub = this.usersCollection.valueChanges().subscribe(data => {
    this.users = data;
  });
}

第三步：在页面渲染列表 #

最后把数据绑定到页面的列表组件，用*ngFor循环渲染即可：

<ion-header>
  <ion-navbar>
    <ion-title>匹配的用户列表</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let user of users">
      <h2>邮箱：{{ user.user.email }}</h2>
      <!-- 这里可以添加其他需要展示的字段 -->
    </ion-item>
  </ion-list>
</ion-content>

几个关键注意事项 #

• 子字段路径要准确：确保你写的user.email和Firestore文档里的结构完全一致，大小写也要严格匹配！
• Firestore安全规则：要确保你的Firestore规则允许读取目标集合，不然会出现权限错误。测试阶段可以临时用宽松规则（上线前一定要改回严格规则）：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /users/{document=**} {
        allow read, write: if true;
      }
    }
  }
  

• 内存泄漏预防：页面销毁时记得取消订阅，避免内存泄漏：

  ngOnDestroy() {
    if (this.usersSub) {
      this.usersSub.unsubscribe();
    }
  }
  

这样一套流程走下来，你应该就能成功获取到匹配邮箱的子字段数据并展示在列表里啦！如果还有细节问题，随时调整就行～

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