问题已得到解答,但我正在寻找一个,嗯,更直接的问题.看起来奇怪的是,为了能够访问对象键,我们必须实现一个而不是两个映射.
基本firebase 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();
}
}
.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();
}
}
