Ionic 2 : Refresh tabs view after adding a new dynamic tab

Question

I'm using ionic tabs. Some tabs are generated from database (the ones without icons)

Now when i add a new tab and refresh the array i should get 3 dynamic tabs. Instead i have 5 (the 2 previous ones and the 2 previous ones with the newest created tab) Despite the array correctly has 3 objects.

[Object, Object, Object]

So here the related code (the tabs component has an event that listen to a tab creation) :

// tabs.ts  import { Component } from '@angular/core'; import { Events } from 'ionic-angular'; import { DatabaseService } from "../../providers/database.service";  import { ItemsPage } from '../items/items'; import { ContactPage } from '../contact/contact'; import { HomePage } from '../home/home'; import { CategoryPage } from '../category/category';  @Component({   templateUrl: 'tabs.html' }) export class TabsPage {    categories: any = [];    tab1Root = HomePage;   tab2Root = CategoryPage;   tab3Root = ItemsPage;   tab4Root = ContactPage;    constructor(public databaseService: DatabaseService, public events: Events) {       this.events.subscribe('category:created', () => {       this.refreshTabs();     });   }    ngOnInit() {     this.refreshTabs();   }    refreshTabs() {     this.databaseService.getCategories().then(categories => {       this.categories = categories;       console.log(this.categories); // [Object, Object, Object]     });   }  } 

So anytime i add or edit a tab i call :

this.events.publish('category:created');

tabs.html :

<ion-tab [root]="tab2Root" tabTitle="{{ category.name }}" [rootParams]="category.id" *ngFor="let category of categories"></ion-tab> 

Any idea why the view on the tabs is incorrect?

UPDATE :

It seems using this.category.push({id: 1, name: 'a category name'}) is working but i'd would rather refresh the entire array so i can order the way i want it from the sql query.

Subject has been posted on ionic forum as well

Answer 1

Try triggering change detection manually -

import { Component, NgZone } from '@angular/core'; import { Events } from 'ionic-angular'; import { DatabaseService } from "../../providers/database.service";  import { ItemsPage } from '../items/items'; import { ContactPage } from '../contact/contact'; import { HomePage } from '../home/home'; import { CategoryPage } from '../category/category';  @Component({   templateUrl: 'tabs.html' }) export class TabsPage {    categories: any = [];    tab1Root = HomePage;   tab2Root = CategoryPage;   tab3Root = ItemsPage;   tab4Root = ContactPage;    constructor(public databaseService: DatabaseService, public events: Events, private ngZone: NgZone) {       this.events.subscribe('category:created', () => {       this.refreshTabs();     });   }    ngOnInit() {     this.refreshTabs();   }    refreshTabs() {     this.databaseService.getCategories().then(categories => {     this.ngZone.run(() => {       this.categories = categories;       console.log(this.categories); // [Object, Object, Object]     });   });   }  }