角型FIREBASEオブジェクトキーが表示されません。だから削除することはできません

Question

質問が答えているが、私は、um、より簡単なものがあればそれを探しています。オブジェクトキーにアクセスするだけではなく、1つではなく2つのマッピングを実装する必要があるのは奇妙なことです。

基本火災データベースdb： ご覧のとおり、コースオブジェクトには明らかにキーがあります。 マークアップは：

<ul> 
    <li *ngFor="let course of courses$ | async"> 
    <b>Key:</b> {{course.$key}} <!-- doesn't show --!> 
    <b>Title:</b> {{course.Title}} 
    <b>Duration:</b> {{course.Duration}} 
    <b>Author:</b> {{course.Author}} 
    <p><button (click)="deleteCourse(course)">Remove</button></p> 

    <hr> 
    </li> 
</ul> 

さて、コースはうまく表示されますが、私はそれを削除するために、キーへの参照を取得する方法がわかりません。 （あるいは、firebaseDatabaseオブジェクトで正しいメソッドを使用していないかもしれません）。いずれにしても、コンソールにキーを記録すると、定義されていないものとして表示されます。

export class AppComponent { 
    courses; 
    courses$: AngularFireList<any>; 

    constructor(private db: AngularFireDatabase) { 
    this.courses = db.list('/courses'); 
    this.courses$ = this.courses.valueChanges(); 
    } 
    ... 
    deleteCourse(course) { 
    console.log(course.$key); // -> undefined 
    this.db.object('/courses/' + course.$key).remove(); 
    } 
} 

Answer 1

.valueChanges()には単純なデータが含まれ、キーは含まれません。あなたは今ちょうどここ{{course.key}}

を使用.snapshotChanges()

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

を使用する必要があなたの修正コード

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

export class AppComponent { 
    courseRef: AngularFireList<any>; 
    courses$: Observable<any[]>; 

    constructor(private db: AngularFireDatabase) { 
    this.courseRef = db.list('/courses'); 
    this.courses$ = this.courseRef.snapshotChanges().map(changes => { 
     return changes.map(c => ({ key: c.payload.key, ...c.payload.val() 
    })); 
    }); 
    } 
    ... 
    deleteCourse(course) { 
    console.log(course.key); 
    this.db.object('/courses/' + course.key).remove(); 
    } 
}