AngularFire2在ObjectObservable删除后避免空值答案

【问题标题】：AngularFire2 avoid null value after ObjectObservable removeAngularFire2在ObjectObservable删除后避免空值
【发布时间】：2016-11-03 15:30:32
【问题描述】：

我有一个使用来自AngularFire2 ObjectObservable 的ngFor 构建的HTML 列表。

一旦从数据库中删除了一个对象（不是最后一个），null 就会出现在他的位置（索引）中，并且 HTML 列表会尝试更新，但 ngFor 循环会抛出一个错误。

来自 AngularFire2 数据库的 JSON：

let tasksList = {
  "name": "Task list",
  "items": [
    {
      "name": "Task 1"
    },
    {
      "name": "Test 2"
    },
    {
      "name": "Test 3"
    }
  ]
}

HTML：

    <ul *ngFor="let theTask of tasksList.items">
      <li>{{theTask.name}}</li>
    </ul>

删除任务 1 后，JSON 如下所示：

let tasksList = {
  "name": "Task list",
  "items": [
    null,
    {
      "name": "Test 2"
    },
    {
      "name": "Test 3"
    }
  ]
}

我认为最简单的解决方案是阻止null 值替换deleted object。但这可能吗？

谢谢

【问题讨论】：

您能解释一下您是如何收到包含数组的 JSON 结构的吗？当数组数据写入 Firebase 时，它会被转换为一个对象，其键从数组索引派生。如果您的问题包含读取和删除数据的代码，您的问题可能是可以回答的，但以目前的形式，我看不出任何人可以回答这个问题。
抛出了什么错误？
感谢您的参与，我今天会尽力提供详细信息。
很抱歉，我昨天未能发布更多详细信息。今天，我想到了一个解决方案（可能是暂时的）。（我对获胜答案的评论）

标签： json angular firebase-realtime-database angularfire2

【解决方案1】：

您可以使用 angular 2 的 pipe（angular 1 的 filter）来过滤所有空项目：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'removeNull', pure: false})
export class RemoveNullPipe implements PipeTransform {
  transform(items: any[]): any {
    return items.filter(item => item);
  }
}

然后在 HTML 中使用它：

<ul>
  <li *ngFor="let theTask of tasksList.items | removeNull">{{ theTask.name }}</li>
</ul>

我将*ngFor从<ul>移动到<li>元素，在<ul>中重复<li>s似乎更好，而不是重复uls

plunker：http://plnkr.co/edit/IQq45kaJqqWRZOqhZdoe?p=preview

【讨论】：

非常感谢这个精彩的例子。这解决了我在 VIEW 上的问题。为了解决 Firebase2 DB 上的“null”问题，我将“获取”所有“项目”=> 更新它们 => 在 DB 上“设置”它们（没有元素）