1

我正在使用 Firebase 在 Angular 中开展一个项目。我无法从 Firebase 数据库中更新和删除对象。

这是一个代表我的问题的Stackblitz 示例。

组件.ts

update(course) {
    this.db.object('/courses/' + course.key ).update(course.value + 'updated');
}

delete(course) {
    this.db.object('/courses/' + course.key ).remove();
}

组件.html

<div class="form-group mt-4">
    <input type="text" class="form-control" placeholder="Enter cource..." (keyup.enter)="add(course)" #course>
</div>
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let course of course$ | async | keyvalue">{{course.value}} <span><button (click)="update(course)" type="button" class="btn btn-sm btn-outline-success mr-2">Update</button><button (click)="delete(course)" type="button" class="btn btn-sm btn-outline-danger">Delete</button></span></li>
</ul>
4

2 回答 2

2

您需要听以snapshotChanges获取文档的实际密钥，您可以在更新（我set在这里使用，因为它不需要对象）和删除时参考。所以改变你获取数据的方式。通常我使用扩展运算符添加有效负载数据，但由于您的有效负载只是一个字符串，因此我将其添加为变量payload（您可以选择自己的名称）并将文档 ID 存储为key：

this.course$ = this.courses.snapshotChanges().pipe(
  map((changes: any) => {
    const data = changes.map(d => ({ key: d.key, payload: d.payload.val()}))
    return data;
  })
)

然后就可以使用正确的key来更新和删除：

update(course) {
  this.db.object('/courses/' + course.key).set(course.payload + ' updated');
}

delete(course) {
  this.db.object('/courses/' + course.key).remove();
}

然后我们需要对模板进行一些更改，我们不需要keyvalue管道：

<li *ngFor="let course of course$ | async "> {{course.payload}} </li>

你的分叉STACKBLITZ

也不要使用any，输入您的数据，让您的生活更轻松！

于 2019-09-10T12:03:24.887 回答
0

该方法采用带有键值对update()的 JavaScript对象。

但是在这个调用中，您传递的是一个无效的字符串值：

this.db.object('/courses/' + course.key ).update(course.value + 'updated');

修复取决于您/courses/$key在数据库中存储的内容。

如果您的结构/courses/$key是一个对象，并且看起来像这样：

"courses": {
  "coursekey": {
    "property1": "value",
    "property2": "value"
  }
}

您可以使用以下命令更新特定属性：

this.db.object('/courses/coursekey').update({ property1: 'updated' });

如果你的结构/courses/$key是一个单一的值，看起来像这样：

"courses": {
  "coursekey": "value"
}

您可以使用以下方法更新它：

this.db.object('/courses/coursekey').set('updated');
于 2019-09-10T13:27:59.613 回答