Ionic AngularFireList snapshotChanges

Question

我试图了解如何使用snapshotChanges。我了解如何使用valueChanges来获取没有来自Firebase的元数据的基本列表，但我希望能够从列表中选择一个项目，将其推送到新页面，在需要时对其进行更改，以及查看/编辑其子项数据因此我需要元数据。我现在有这个代码，但是我无法理解如何使用snapshotChanges从我的firebase数据中获取列表的元数据。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ActionSheetController } from 
'ionic-angular';
import { AdminProvider } from '../../providers/admin/admin';
import { AngularFireDatabase, AngularFireList } from 
'angularfire2/database';
import {Observable} from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import { Profile } from '../../models/profile';
import { EmployeeDetailPage } from '../employee-detail/employee-detail';
import { FirebaseListObservable, FirebaseObjectObservable } from 
'angularfire2/database-deprecated';


@IonicPage()
@Component({
  selector: 'page-admin',
  templateUrl: 'admin.html',
})
export class AdminPage {
  employeeListRef: AngularFireList<Profile>; 

  employeeList: Observable<Profile[]>;
  employee: Observable<void>;
  searchTerm: String;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public adminProvider: AdminProvider,
    public database: AngularFireDatabase,
    private afAuth: AngularFireAuth,
    private actionSheetCtrl: ActionSheetController
  ) {

        this.employeeListRef = this.database.list('userProfile', 
          ref=> ref.orderByChild('lastName'));
        this.employeeList = this.employeeListRef.valueChanges();

  }

  goToEmployeeDetail(key: string){

    this.employee = 
      this.database.object('userProfile/{key}').snapshotChanges().map(res => 
  {
      res.payload.val();
   });
      this.navCtrl.push('EmployeeDetailPage', this.employee);

  }

  setFilteredItems() {
    return this.employeeList.map(profile => profile.filter(profile => 
      profile.firstName == this.searchTerm));

 }

}

更新：我终于明白了。关键是我很困惑：c.payload调用，因为我在其他示例中看到了这些但是相信你必须格式化它以适合你的代码而且我不知道如何用我的这样做，但现在我知道你只是需要将其作为映射的一部分。所以现在我能够使用snapshotChanges创建列表并为用户打印列表。我目前正在尝试找到如何从该列表中获取单个项目并将其推送到新页面以进行操作并访问/显示其子内容。任何有关如何做的信息将不胜感激，但如果我弄明白，将更新这个。

this.employeeListRef = this.database.list('userProfile', 
    ref=> ref.orderByChild('lastName'));

this.employeeList = this.employeeListRef.snapshotChanges()
    .map(
        changes => {
            return changes.map(c => ({
                key: c.payload.key, ...c.payload.val()
            }))
        }
    );

更新2：了解如何从我的角火列表中获取单个项目并将其推送到新页面。因此，在我的html中，我将项目设置为离子列表，因此当我单击任何项​​目时，它将使用该项目键调用goToEmployeeDetail函数。它现在将用户发送到员工详细信息页面，其中包含使用密钥找到的员工信息。

以下是该功能的代码。

goToEmployeeDetail(key: string){
    firebase.database().ref(`/userProfile/` + key).on('value', 
       userProfileSnapShot => { 
           this.userProfile = userProfileSnapShot.val();
    });

    this.navCtrl.push('EmployeeDetailPage', this.userProfile);    
}

如果有人需要它，还有HTML。

<ion-header>
   <ion-navbar>
    <ion-title>Employee List</ion-title>
   </ion-navbar>
</ion-header>


<ion-content padding>
  <h1>
    Employees
  </h1>

  <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()">
  </ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let profile of employeeList | async" 
 (click)="goToEmployeeDetail(profile.key)">
  <h2>{{profile.firstName}} {{profile.lastName}}</h2>
      <p>Email:
        <strong>{{profile.email}}</strong>
      </p>

      <p>Checked In:
         <strong *ngIf = "profile.checkedIn === true "> Yes </strong>
         <strong *ngIf = "profile.checkedIn === false "> No </strong>
      </p>
      <p>UID:
         <strong>{{profile.key}}</strong>
      </p>
    </ion-item>
  </ion-list>
 </ion-content>