AngularFire2 avoid null value after ObjectObservable remove - json

Question

I have a HTML list build with ngFor from AngularFire2 ObjectObservable.
Once a object(not last) is deleted from the Database, null appears in his position(index) and the HTML list tries to update but an error is thrown from the ngFor loop.
JSON from AngularFire2 DB:
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>
After task 1 has been removed, the JSON looks like this:
let tasksList = {
"name": "Task list",
"items": [
null,
{
"name": "Test 2"
},
{
"name": "Test 3"
}
]
}
I think that the simplest solution would be to stop the null value from replacing the deleted object.
But is that possible?
Thank you

Answer 1

You can use angular 2's pipe (angular 1's filter) in order to filter all empty items:
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);
}
}
then use it in HTML:
<ul>
<li *ngFor="let theTask of tasksList.items | removeNull">{{ theTask.name }}</li>
</ul>
I moved *ngFor from <ul> to <li> element, it seems better to repeat <li>s within <ul> and not repeat uls
plunker: http://plnkr.co/edit/IQq45kaJqqWRZOqhZdoe?p=preview