使用 angularfire2 从索引中检索对象

Question

我正在尝试（部分成功 :( ) 在 Ionic 应用程序中使用 angularfire2 基本方法（例如 list() 和 object()）从我的 firebase RTDB 的索引集合中检索完整对象作为可观察对象。在检索用户注册的课程的键列表时，我进行了一个新查询，并使用 object() 方法将完整数据作为可观察对象获取。第一次加载页面时，我在视图中得到了几个 null 但可观察对象仍然存在，所以如果我在控制台中对这些对象进行小的更改，整个对象将被检索并毫无问题地显示在视图中。我错过了什么吗？

Firebase RTDB root-level nodes

这是我的页面ts代码

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, List } from 'ionic-angular';
import { ProfileServiceProvider } from '../../providers/profile-service/profile-service';
import { MomentsFeedPage } from '../moments-feed/moments-feed';
import { CourseServiceProvider } from '../../providers/course-service/course-service';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
/**
 * Generated class for the MomentsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-moments',
  templateUrl: 'moments.html',
})
export class MomentsPage{

  @ViewChild('enrolledList', { read: List }) enrolledList: List;
  public enrolledLis: Observable <{}>;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public courseService: CourseServiceProvider,
    public userProfile: ProfileServiceProvider,
    public afDB: AngularFireDatabase
  ) {

    if(this.userProfile.currentUser) {
      console.log('constructor MomentsPage');
      this.enrolledLis = this.afDB.list('/userEnrollments/'+this.userProfile.currentUser.uid).snapshotChanges()
        .map( res => {
          let enrolled = res;
          let that = this;
          return enrolled.map(key => 
            that.courseService.getCourseDetail(key.key).snapshotChanges()
            .map(snap => 
               ({ key: snap.key, ...snap.payload.val() } )
            )
          )
        }
      );
    }

  }

  goToTopicsFeed(course: any) {
    this.navCtrl.push(MomentsFeedPage, {
      courseId: course.key, courseName: course.name, coursePic: course.coursePic
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MomentsPage');
  }

}

这是视图的代码

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Moments</ion-title>
  </ion-navbar>
</ion-header>
<ion-content no-padding fullscreen parallax-header>
  <div class="header-image" style="background-image:url('./assets/imgs/lists/wishlist-1.jpg')">
    <h1>Moments</h1>
  </div>
  <div class="main-content">
    <ion-list #enrolledList>
      <ion-item-sliding *ngFor="let course of enrolledLis | async" [attr.track]="(course|async)?.degree | courseTrackPipe ">
        <button ion-item (click)="goToTopicsFeed(course)" >
          <ion-thumbnail item-start>
            <img [src]="(course|async)?.coursePic || './assets/imgs/Film-set-greyscale.jpg'" alt="Course profile pic">
          </ion-thumbnail>
          <h2>{{(course|async)?.name}}</h2>
          <h3>{{(course|async)?.degree}}</h3>
          <p>Topics info: #topics {{(course|async)?.topicsCount}} activity...</p>
        </button>
      </ion-item-sliding>
    </ion-list>
  </div>
</ion-content>

在这里你可以看到行为：

Partial processing of the observables (courses) during first call: css class in added so some rules are applied (border in blue or red)

The first object (course observable) was updated in the firebase console and updated without issues in the view

Answer 1

好的。我会回答自己：代码没有问题，也许我测试错了。总之，代码中有一些不太好的地方：返回异步 Observables 可能会导致 (click) 操作出现一些问题。这些可以使用 *ngIf="course" 块来解决，以确保在运行时获取对象。

使用 angularfire2 从索引中检索对象

Retrieve objects from indexes using angularfire2

firebase-realtime-database

ionic3

angularfire2

angular2-observables