Javascript 如何在将正确渲染的对象内使用snapshotChanges（）？

我正在试验Angular 5和Firebase特别是它的

实时数据库

，为此我使用

angularfire2

特别是

v5

，我了解

列表

和

对象

之间的区别，以及

值更改之间的区别（）

和

快照更改（）

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

"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（）
，如果我们在
列表中使用它，它将变成这样

// 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() }));
    });
  }
}

当

及

//在app.component.html上
{{mycourse$.COURSE}


上面的代码不起作用，浏览器控制台上没有打印错误消息，但是浏览器只是不会呈现
mycourse$。课程
值，为什么如何解决这个问题？
好的，我不知道角度和角度。。所以也许这个评论是完全愚蠢的。。。但是，当作为
对象
检索数据时，您真的必须使用
map（）
吗？是的，因为仅从
订阅
返回的对象就相当大和复杂，我们希望通过使用
map
来简化它，文档也推荐使用它。
// 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>

// 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() };
    });
  }
}

// on app.component.html
<div *ngIf="mycourse$ | async">
  <p>{{ mycourse$.COURSE }}</p>
</div>