使用 angularfire2 从索引中检索对象答案

【问题标题】：Retrieve objects from indexes using angularfire2使用 angularfire2 从索引中检索对象
【发布时间】：2018-08-16 04:07:58
【问题描述】：

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

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

【问题讨论】：

标签： firebase-realtime-database ionic3 angularfire2 angular2-observables

【解决方案1】：

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

【讨论】：