删除 Firebase 入口角度 2 [英] Delete Firebase entry angular 2

查看：20
本文介绍了删除 Firebase 入口角度 2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经寻找了很多来回答这个问题.遵循有关 AngularFire 2 和 Angular 2 本身的文档，但我找不到有效的答案.我只想使用唯一键删除我的 firebase 数据库中的一个条目.我可能可以在 Angular 4 中做到这一点，但我必须为 Angular 2 做到这一点.

任何支持将不胜感激！

import { Component, OnInit } from '@angular/core';从 'angularfire2/database' 导入 { AngularFireDatabase, FirebaseObjectObservable };从rxjs/Observable"导入 {Observable}；@成分({选择器:应用列表"，templateUrl: './listings.component.html',styleUrls: ['./listings.component.scss']})导出类 ListingsComponent 实现 OnInit {项目:Observable;项目:FirebaseObjectObservable;构造函数(数据库:AngularFireDatabase){this.items = db.list('哈利');this.item = db.object('/Harry/');}删除() {this.item.remove();//删除所有数据.}ngOnInit() {}}

添加了 HTML

    <li class="list-group-item" *ngFor="let item of items | async"><p><strong>名称:</strong>{{item.name}}</p><p><strong>电子邮件:</strong>{{item.email}}</p><p><strong>移动:</strong>{{item.mobile}}</p><p><strong>地址:</strong>{{item.address}}</p><div class="editDel row"><div class="col-sm-1"><button class="btn-primary">编辑</button></div><div class="col-sm-1"><button class="btn-danger" (click)="delete()">Delete</button></div>

添加包版本

{"name": "ng2-firebase-addresslist",版本":0.0.0"，"许可证": "麻省理工学院",角度cli":{}，脚本":{"ng": "ng","start": "ng serve","test": "ng 测试","pree2e": "webdriver-manager update --standalone false --gecko false","e2e": "量角器"},私人":真的，依赖关系":{"@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-b​​rowser": "^2.3.1","@angular/platform-b​​rowser-dynamic": "^2.3.1","@angular/router": "^3.3.1","angular2-flash-messages": "^1.0.8","angularfire2": "^2.0.0-beta.7-pre","core-js": "^2.4.1","firebase": "^3.9.0","rxjs": "^5.0.1","ts-helpers": "^1.1.1",zone.js":^0.7.2"},开发依赖":{"@angular/cli": "^1.4.4","@angular/compiler-cli": "^2.3.1","@types/jasmine": "2.5.38","@types/node": "^6.0.42","codelyzer": "~2.0.0-beta.1","jasmine-core": "2.5.2","jasmine-spec-reporter": "2.5.0","业力": "1.2.0","karma-chrome-launcher": "^2.0.0","karma-cli": "^1.0.1","karma-jasmine": "^1.0.2","karma-remap-istanbul": "^0.2.1",量角器":~4.0.13"，"ts-node": "1.2.1","tslint": "^4.3.0","打字稿": "~2.0.3","webpack": "^3.6.0"}}

所以我注意到很多指南和教程在这个主题上有很大的不同，主要是因为不同版本的 AngularFire2 每次都会改变它的工作方式.对于像我这样正在学习的人来说，这个问题已经引起了很多挫折.

解决方案

所以我用稍微不同的方法解决了.

我注意到在我的 HTML 中发布此内容为我提供了每个 firebase 对象的单独密钥.

<p><strong>项目密钥:</strong>{{item.$key}}</p>

于是我更进一步，将它包含在我的 onClick 函数中.

<button class="btn-danger" (click)="deleteObject(this.item.$key)">Delete</button>

然后我将其输入到listings.components.ts 中的函数中

deleteObject(itemKey) {this.db.object('/Harry/' + itemKey).remove();}

最终成功地通过密钥一一删除了对象！感谢大家一路上对我的支持.还有 AngularFire2，获得更好的文档！！！

I've looked for quite a bit for an answer to this question. Followed documentation on AngularFire 2 and Angular 2 itself but I can't find a working answer. I simply want to delete an entry in my firebase database using the unique key. I could probably do this in Angular 4 but I'm having to do this for Angular 2.

Any support would be greatly appreciated!

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
import {Observable} from "rxjs/Observable";

@Component({
  selector: 'app-listings',
  templateUrl: './listings.component.html',
  styleUrls: ['./listings.component.scss']
})
export class ListingsComponent implements OnInit {
  items: Observable<any[]>;
  item: FirebaseObjectObservable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('Harry');
    this.item = db.object('/Harry/');
  }
  delete() {
    this.item.remove(); // removes all data.
  }

  ngOnInit() {
  }
}

EDIT: Added the HTML

<ul class="list-group">
  <li class="list-group-item" *ngFor="let item of items | async">
    <p><strong>Name: </strong>{{item.name}}</p>
    <p><strong>Email: </strong>{{item.email}}</p>
    <p><strong>Mobile: </strong>{{item.mobile}}</p>
    <p><strong>Address: </strong>{{item.address}}</p>
    <div class="editDel row">
      <div class="col-sm-1"><button class="btn-primary">Edit</button></div>
      <div class="col-sm-1"><button class="btn-danger" (click)="delete()">Delete</button></div>
    </div>
  </li>
</ul>

EDIT: Added package versions

{
  "name": "ng2-firebase-addresslist",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "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",
    "angular2-flash-messages": "^1.0.8",
    "angularfire2": "^2.0.0-beta.7-pre",
    "core-js": "^2.4.1",
    "firebase": "^3.9.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.4",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3",
    "webpack": "^3.6.0"
  }
}

So I've noticed a lot of the guides and tutorials differ wildly on this topic mostly because different versions of AngularFire2 change how this works each time. An issue which has caused a lot of frustration for someone like myself who is learning.

解决方案

So I solved it using a slightly different method.

I noticed posting this in my HTML gave me my individual key for each firebase object.

<p><strong>Item Key: </strong>{{item.$key}}</p>

So I then took it a step further and included it in my onClick function.

<button class="btn-danger" (click)="deleteObject(this.item.$key)">Delete</button>

Which I then fed into my function in listings.components.ts

deleteObject(itemKey) {
 this.db.object('/Harry/' + itemKey).remove();
}

That successfully ended up removing the objects by their key one-by-one! Thanks for everyones support here that helped me along the way. Also AngularFire2, get better documentation!!!

这篇关于删除 Firebase 入口角度 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆