Firebase RTは4つのオブジェクトを返しますが、使用できるのは3つだけです

Question

私が助けるために追加できるものがあれば教えてください。アイテムのキーを取得しようとしていますが、最初にデータを取得して表示しようとしています。

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    coursesRef: AngularFireObject<any>; 
    courses: Observable<any>; 

    constructor(db: AngularFireDatabase) { 
    this.coursesRef = db.object('/courses'); 
    this.courses = this.coursesRef.valueChanges(); 

    this.courses.subscribe(course => console.log(course)); 
    } 
} 

app.component.html

<ul> 
    <li *ngFor="let course of courses | async"> 
    {{ course | json }} 
    </li> 
</ul> 

データベースのみ3.

Answer 1

Iを含むが、これは4つのオブジェクトを返しますその答えは、オブジェクトがngOnInit fu nction。

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit { 
    coursesRef: AngularFireList<any>; 
    courses: Observable<any[]>; 

    constructor(private db: AngularFireDatabase) { 
    this.coursesRef = db.list('/courses'); 
    } 

    ngOnInit() { 
    this.courses = this.coursesRef.valueChanges(); 

    this.courses.subscribe(course => console.log(course)); 
    } 
}