イオン2：新しい動的タブを追加した後、タブを更新する

Question

イオンタブを使用しています。データベースから生成されているいくつかのタブ（アイコンなしのもの）

は、今私は、新しいタブを追加し、私は3つのダイナミックタブを取得する必要があり、アレイをリフレッシュするとき。代わりに私は5（2つ前のものと2つ前のものは、最新の作成されたタブを持つ）配列にもかかわらず、3つのオブジェクトが正しくあります。

[オブジェクト、オブジェクト、オブジェクト]だからここ

関連するコード

（タブコンポーネントタブの作成を聞くイベントがあります）：

// 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] 
    }); 
    } 

} 

いつでも私はタブを追加または編集しています。

this.events.publish（ 'category：created'）;

tabs.html：

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

タブの表示が間違っている理由を任意のアイデア？

UPDATE：

それはthis.category.push({id: 1, name: 'a category name'})が動作しているが、私はSQLクエリからそれを望むように注文することができますので、私はむしろ、アレイ全体をリフレッシュするだろうと思います使用しているようです。手動で変化検出をトリガ

Subject has been posted on ionic forum as well

Answer 1

TRY -

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] 
    }); 
    }); 
    } 

}