删除 Firebase 条目角 2

Question

我一直在寻找这个问题的答案。遵循有关 AngularFire 2 和 Angular 2 本身的文档，但我找不到有效的答案。我只是想使用唯一键删除我的 firebase 数据库中的一个条目。我可能可以在 Angular 4 中执行此操作，但我必须在 Angular 2 中执行此操作。

任何支持将不胜感激！

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() {
  }
}

编辑：添加 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>

编辑：添加软件包版本

{
  "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"
  }
}

所以我注意到很多指南和教程在这个主题上大相径庭，主要是因为不同版本的 AngularFire2 每次都会改变它的工作方式。一个让像我这样正在学习的人感到非常沮丧的问题。

Answer 1

所以我用稍微不同的方法解决了这个问题。

我注意到在我的 HTML 中发布这个给了我每个 firebase 对象的单独密钥。

<p><strong>Item Key: </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，获取更好的文档！！！

Answer 2

试试

items: FirebaseListObservable<any[]>;

delete() {
  this.items.remove(this.item)
}

编辑

其他一些事情看起来不太对

constructor(db: AngularFireDatabase) {
    this.items = db.list('Harry');
    this.item = db.object('/Harry/');
  }

应该是

constructor(private db: AngularFireDatabase) {
    this.items = this.db.list('Harry');
    this.item = this.db.object('/Harry/');
  }

您可能还想将构造函数中的代码移动到 ngOnInit，因为 AngularFire 可能尚未在构造函数中准备好。 没有必要，根据下面链接的示例。

编辑#2

模板看起来差不多没问题，但是因为items现在是FirebaseListObservable，需要用$value访问迭代项

<p><strong>Name: </strong>{{item.$value.name}}</p>
<p><strong>Email: </strong>{{item.$value.email}}</p>
<p><strong>Mobile: </strong>{{item.$value.mobile}}</p>
<p><strong>Address: </strong>{{item.$value.address}}</p>

或者，使用this.items = db.list('Harry').valueChanges()，根据文档Example of persisting a Document Id中的这个示例

编辑#3

由于您必须使用特定版本，我认为查看特定版本的源代码 (https://github.com/angular/angularfire2/releases) 可能会很有用。 2.0.0-beta.7，虽然你可能有 2.0.0-beta.8。

您可能听说过“文档腐烂”一词，这意味着在处理旧版本时更好地查看代码和规范。

相关规范是

describe('remove', () => {

    it('should call remove on the underlying ref', () => {
      var removeSpy = spyOn(ref, 'remove');

      O.subscribe();
      O.remove();
      expect(removeSpy).toHaveBeenCalledWith();
    });

    it('should throw an exception if removed when not subscribed', () => {
      O = new FirebaseObjectObservable((observer:Observer<any>) => {});

      expect(() => {
        O.remove();
      }).toThrowError('No ref specified for this Observable!')
    });

    it('should resolve returned thenable when successful', (done:any) => {
      O.remove().then(done, done.fail);
    });

  });

其中O 等同于您的this.item。尝试将this.item.subscribe() 添加到您的删除方法中。

另外，当您检索项目时，为什么是“/Harry/”而不是“/Harry”？

而且，您可以将操作包装在一个捕获错误的承诺中。来自 'docs\2-retrieving-data-as-objects.md'，

promise 可以用于链接多个操作，捕获 安全规则拒绝或调试可能导致错误。

const promise = af.database.object('/item').remove(); promise.then(_ => console.log('success')) .catch(err => console.log(err, 'You dont have access!'));

Answer 3

  <tbody>
        <tr *ngFor='let item of items | async'>
        <td>{{item.in}}</td>
        <td>{{item.des}}</td>
        <td>{{item.cast}}</td>
        <td>{{item.tomi}}</td>
        <td>{{item.ris}}</td>
        <td>
            <div class="btn-group">
                <button (click)="deleteItem(item)" class= "btn btn-danger"> delete </button> 
              
         </div>
        <td>  
        </tr>
    </tbody>

**

 - .ts file

**
deleteItem(user: User) {
    const confirmBox = confirm('Are you sure?');
    if (confirmBox) {
      this.service.deleteUser(user.id).then(() => {
        this.snackBar.open('visitor has been deleted successfully...', 'close');
      });
    }
  }

**

 - service

**
  constructor(private fireStore: AngularFirestore) { }

deleteUser(id: string): any {
    return this.fireStore.doc(`${this.dbName}/` + id).delete();
  }