Ionic list not updating properly when adding new item

Ionic Framework ionic-v3
1

Hey guys,
I’m trying to use Backand for the frist time and I got some problems. I have an ion-list which shows items that are stored in an array. When I add an item to the array, you can see that the list adds a new item at the bottom but the item is empty! if completely reload everything then the item is there with text inside. I already tried ngZone.run() but that doesn’t help.

The code where a new item is added to the array:

public saveTable(name: string) {
    this.backandService.addTable(name, 0).subscribe(
      data => {
        this.tables.push(data);
      }, err => {
        console.error(err);
      }
    );
  }

and the html of the list

<ion-list-header>
  Tische
</ion-list-header>

<ion-item *ngFor="let table of tables">
  {{table.name}}
  <span class="price">
    {{table.price | currency:'EUR':true:'1.2-2'}}
  </span>
</ion-item>
2

<ion-item> is a component, not just an DOM element. So barely inserting a element into the list might be not honoring Angular 2’s change detection rereading the component tree.

3

If change detection would not work at all, I would not see an empty item added to the list. However what could I do to force angular to reread the component tree (I already tried NgZone)?