Ionic 3中基于Firebase Database的列表功能技术问询

嘿，我来帮你搞定用Ionic 3结合Firebase Realtime Database实现列表功能的事儿！先看看你的数据结构，是个嵌套的多级结构——rootList下面有多个列表项，每个列表项带主持人名称和宾客列表，完全没问题，咱们一步步来实现。

首先先明确你的Firebase数据结构：

你的Firebase Realtime Database数据结构如下：

{ 
  "rootList" : { 
    "list_1" : { 
      "guestsList" : { 
        "item_1_1" : { "name" : "xxxxx", "surname" : "yyyyy" } 
      }, 
      "hostName" : "Host_1" 
    }, 
    "list_2" : { 
      "guestsList" : { 
        "item_2_1" : { "name" : "xxxx", "surname" : "yyyy" }, 
        "item_2_2" : { "name" : "xxx", "surname" : "yyy" } 
      }, 
      "hostName" : "Host_2" 
    }, 
    "list_3" : { 
      "guestsList" : { 
        "item_3_1" : { "name" : "xxyy", "surname" : "yyxx" }, 
        "item_3_2" : { "name" : "xyxy", "surname" : "yxyx" }, 
        "item_3_3" : { "name" : "..." } 
      } 
    } 
  }
}

这个结构是多层嵌套的：rootList是顶层节点，每个子节点（list_1、list_2...）是一个“列表项”，包含主持人名称hostName和宾客列表guestsList，而guestsList下又包含多个宾客条目。

1. 先做好准备工作 #

确保你的Ionic 3项目已经集成了Firebase相关依赖，执行以下命令安装适配Ionic 3的对应版本：

npm install firebase@4.8.0 angularfire2@5.0.0-rc.6 --save

然后去Firebase控制台获取你的项目配置信息（apiKey、authDomain这些），后面要用到。

2. 封装Firebase数据服务 #

为了让组件逻辑更清晰，咱们写一个专门的服务来处理Firebase的数据获取。生成一个list.service.ts文件：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ListService {
  constructor(private db: AngularFireDatabase) {}

  // 获取所有顶层列表
  getRootLists(): Observable<any> {
    // 如果不需要节点key（比如list_1、list_2），用valueChanges()就够了
    return this.db.list('/rootList').valueChanges();

    // 要是后续需要编辑/删除操作，得保留节点key，就用下面这段：
    // return this.db.list('/rootList').snapshotChanges().map(changes => {
    //   return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    // });
  }
}

3. 在页面组件里获取数据 #

比如在你的首页home.ts里，注入刚才的服务并获取数据：

import { Component } from '@angular/core';
import { ListService } from '../../services/list.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  rootLists$: Observable<any>;

  constructor(private listService: ListService) {
    // 初始化时获取数据
    this.rootLists$ = this.listService.getRootLists();
  }
}

4. 编写模板展示多级列表 #

接下来在home.html里用Ionic的原生列表组件来展示嵌套数据。注意guestsList是对象不是数组，所以要处理遍历问题：

方案一：用Angular的keyvalue管道（Angular 6+适用） #

如果你的Ionic 3项目对应的Angular版本是6+，可以直接用keyvalue管道遍历对象：

<ion-header>
  <ion-navbar>
    <ion-title>宾客列表</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- 遍历顶层列表 -->
  <ion-list *ngFor="let list of rootLists$ | async">
    <!-- 展示主持人名称，没有的话显示默认文本 -->
    <ion-item-divider color="primary">
      <h2>{{ list.hostName || '无主持人' }}</h2>
    </ion-item-divider>
    <!-- 遍历宾客列表 -->
    <ion-item *ngFor="let guest of list.guestsList | keyvalue">
      <h3>{{ guest.value.name }} {{ guest.value.surname }}</h3>
    </ion-item>
  </ion-list>
</ion-content>

方案二：自定义管道（Angular 5及以下适用） #

要是你的Angular版本是5或更低，keyvalue管道还没出，那就自己写一个管道把对象转成数组：
先创建object-to-array.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'objectToArray' })
export class ObjectToArrayPipe implements PipeTransform {
  transform(value: any): any[] {
    // 把对象转成包含key和值的数组
    return Object.keys(value).map(key => ({ key, ...value[key] }));
  }
}

然后模板里改成：

<ion-item *ngFor="let guest of list.guestsList | objectToArray">
  <h3>{{ guest.name }} {{ guest.surname }}</h3>
</ion-item>

5. 最后配置AppModule #

别忘了在app.module.ts里导入Firebase模块、注册服务和管道：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListService } from '../services/list.service';
import { ObjectToArrayPipe } from '../pipes/object-to-array/object-to-array';

// 替换成你自己的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
};

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ObjectToArrayPipe // 注册自定义管道
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig), // 初始化Firebase
    AngularFireDatabaseModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ListService // 注册数据服务
  ]
})
export class AppModule {}

这样一套下来，你就能在Ionic 3里完美展示Firebase里的嵌套列表啦！

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