AngularFire2 在 ObjectObservable 删除后避免空值

Question

我有一个 HTML 列表构建，其中 ngFor 来自 AngularFire2 ObjectObservable。

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

JSON 来自 AngularFire2 数据库：

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。但这可能吗？

谢谢

Answer 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> 而不要重复 uls

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

AngularFire2 在 ObjectObservable 删除后避免空值

AngularFire2 avoid null value after ObjectObservable remove

json

firebase-realtime-database

angularfire2

angular