Question

我正在尝试使用 Angular 5 和 Firebase ，尤其是Realtime Database，为此，我特别使用angularfire2 {{1我理解v5和list之间的区别以及object和valueChanges()之间的差异。

假设我的firebase实时数据库中有以下数据库结构：

snapshotChanges()

在这里，我想使用"courses" : { "ONE" : { "AU" : 1, "COURSE" : "ONE", "COURSE_CODE" : "1111" }, "TWO" : { "AU" : 2, "COURSE" : "TWO", "COURSE_CODE" : "2222" }, "THREE" : { "AU" : 3, "COURSE" : "THREE", "COURSE_CODE" : "3333" }, "FOUR" : { "AU" : 4, "COURSE" : "FOUR", "COURSE_CODE" : "4444" } }，如果我们在snapshotChanges()上使用它，它将会变成这样的

list

，而

// on app.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  mycourses$;

  constructor(private firebaseDB: AngularFireDatabase) {
  }

  ngOnInit() {
    this.mycourses$ = this.firebaseDB.list('courses').snapshotChanges().map((changes) => {
      return changes.map((c) => ({ key: c.payload.key, ...c.payload.val() }));
    });
  }
}

以上代码完美无缺地工作，完全没有问题，正如预期的那样。

但，如果我想在// on app.component.html <ul> <li *ngFor="let course of mycourses$ | async"> <p class="course">{{ course.COURSE }}</p> <span class="course-code"> - {{ course.COURSE_CODE }}</span> <span class="au"> - {{ course.AU }} SKS</span> </li> </ul>上使用snapshotChanges()，请执行以下操作：

object

和

// on app.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  mycourse$;

  constructor(private firebaseDB: AngularFireDatabase) {
  }

  ngOnInit() {
    this.mycourse$ = this.firebaseDB.object('courses/ONE').snapshotChanges().map((change) => {
      return { key: change.payload.key, ...change.payload.val() };
    });
  }
}

以上代码无法正常工作，浏览器控制台上没有打印错误消息，但浏览器赢了＆＃39; t渲染 // on app.component.html <div *ngIf="mycourse$ | async"> <p>{{ mycourse$.COURSE }}</p> </div>值，为什么是这样的？如何来解决这个问题？

如何在Object中使用snapshotChanges（）来正确呈现？

0 个答案: