質問は回答済みですが、可能であれば、もっと簡単な質問を探しています。オブジェクトキーにアクセスするためだけに、1つではなく2つのマッピングを実装する必要があるのは奇妙に思えます。
基本的なFirebaseデータベース:ご覧のとおり、コースオブジェクトには明らかにキーがあります。マークアップ:
<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();
}
}
更新された回答
Rxjsは、データのパイプ方法を変更しました。今、あなたはを使用する必要があります.pipe()
。
this.courses$ = this.courses.snapshotChanges().pipe(
map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
)
);
元の回答
.valueChanges()
単にデータが含まれ、キーは含まれていません。あなたが使用する必要があります.snapshotChanges()
this.courses$ = this.courses.snapshotChanges().map(changes => {
return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
});
今すぐ使用する {{course.key}}
これが修正されたコードです
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();
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加