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

好。我会自己回答：代码没有错，也许我测试错了。无论如何，代码中还是有一些不好的东西：返回异步Observable可能导致（click）动作中出现一些问题。可以使用* ngIf =“ course”块来解决这些问题，以确保在运行时获取对象。

使用angularfire2从索引中检索对象

1 个答案: