如何使用Firebase实现删除Angular2上的数据？

Question

我的依赖;

"private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.8.4"
  },

我在Firebase上有JSON结构;

---------0
------------belt: "black"
------------name: "Shaun"
---------1
------------belt: "black"
------------name: "Yoshi"
---------2
------------belt: "red"
------------name: "Ryu"
---------3
------------belt: "purple"
------------name: "Crystal"
------- -Kfc5VqNdnBGS12kIHW0
------------belt: "red"
------------name: "burçak"
------- -Kfc95-192ywFhKJ10BS
------------belt: "yellow"
------------name: "burak"

我有一个客户端视图，如;

我要删除单击其删除按钮的项目，但我不知道如何编写该代码。

我有一个名为＆＃39; fbRemoveData＆＃39;但是这种方法会按预期删除所有数据库，因为我无法指定代码并且不知道如何操作。

  fbRemoveData(){
    firebase.database().ref('/').remove();
  }

在HTML视图中;

<div (click)="fbRemoveData()" [attr.data-name]="ninja.name">delete</div>

如果你能帮我解决这个问题，我将不胜感激。

感谢。

Answer 1

单击删除按钮将对象传递为

<button (click)="deleteClient(item)"> delete</button>

deleteClient(item){
  this.data.splice(this.data.findIndex(item),1);
}

Answer 2

当您从数据库接收对象时，您也会收到其密钥。 然后，您可以从数据库中删除特定对象，如下所示：

<button (click)="deleteNinja(ninja)">delete</button>

private deleteNinja(ninja: any){
  this.angularFire.database.list('/ninja').remove(ninja.$key);
}

Answer 3

只要有钥匙，Ploppy的答案就应该解决。如果这是您在Firebase上查看数据的方式，那么它似乎不是关键。您应该使用this.angularFire.database.list(ninja).push将每个忍者项添加到数据库中。这样每个项目都会有一个键。

Firebase数据不应该是这样的。每个对象都应该有一个键：

[
  {
    "name":"Shaun",
    "belt":"black"
  },{
    "name": "Yoshi",
    "belt": "black"
  },{
    "name": "Ryu",
    "belt": "red"
  },{
    "name": "Crystal",
    "belt": "purple"
  }
]