AngularFire2 - 通过 Observable 删除项目 - 最后一个项目不会从 UI 中删除

Question

我想知道为什么当我运行此函数时，该项目会从我的 Firebase 数据库中删除，但在我的 Angular 2 应用程序中，当它到达最后一个条目时，它会从数据库中删除它，但不会删除它来 self 的 *ngFor 循环中的列表。但是，如果我刷新页面，列表就会更新，并且该条目不再存在。有人知道为什么会发生这种情况吗？

这是我的提供程序中用于删除附件的功能:

removeAttachment(attachment, projectId, requestId) {
    return this._af.database.list(`/check_requests/${projectId}/${requestId}/attachments/${attachment.id}`).remove();
  }

以下是我的组件中的关联数组:

public attachments: any = [];
public attachmentKeys:any = [];

这是一个异步函数，每当数据库更新时，它都会填充 attachments 和 attachmentKeys 数组:

populateFormWithRequest() {
    this.formPopulationObs = this._checkRequests.getRequest(requestId, projectId).subscribe(requestData => {

      // Get the attachments
      if(requestData['attachments']) {
        this.attachments = requestData['attachments'];
        this.attachmentKeys = Object.keys(requestData['attachments']);
      }
   });
}

这是我的 html 模板中的 *ngFor 循环:

<ul class="attachment-list" *ngIf="attachments && (attachments | mapToIterable).length > 0">
          <li *ngFor="let key of attachmentKeys">
            <a target="_blank" href="{{attachments[key].url}}"><i class="fa fa-paperclip"></i>{{attachments[key].name}}</a>
            <button (click)="removeAttachment(attachments[key], key)"><i class="fa fa-times"></i></button>
          </li>
        </ul>

Answer 1

很可能是这一行:

if (requestData['attachments']) {

当您删除最后一个附件时，发出的请求对象中将不存在attachments 属性。如果 Firebase 数据库中的子级没有子级，它也会被删除。

因此 requestData['attachments'] 将为 false，并且 attachments 和 attachmentKeys 属性将保持不变。

解决方案是这样的:

if (requestData['attachments']) {
  this.attachments = requestData['attachments'];
  this.attachmentKeys = Object.keys(requestData['attachments']);
} else {
  this.attachments = {};
  this.attachmentKeys = [];
}