Question

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

非常感谢任何支持！

<div class="contact">
    <a class="contact-button" href="{% url 'host:contact_owner_offer' email=lodgingofferdetail.created_by.email email=user_interested_email slug=lodgingofferdetail.slug %}">
    <img src="{% static 'img/icons/contact.svg' %}" alt="">
        <span>Contact to owner offer</span>
    </a>
</div>

编辑：添加了HTML

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

编辑：添加了包版本

<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>

所以我注意到很多指南和教程在这个主题上有很大不同，主要是因为不同版本的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>

然后我将其添加到listing.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()添加到您的删除方法。

此外，当您检索项目时，为什么＆＃39; / Harry /＆＃39;而不是＆＃39; / Harry＆＃39;？

并且，您可以将操作包装在承诺中以捕获错误。从＆＃39; docs \ 2-retrieving-data-as-objects.md＆＃39;，

承诺可以用于链接多个操作，捕获   安全规则拒绝或调试时可能出现的错误。

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

删除Firebase条目角度2

2 个答案: