离子2：添加新的动态选项卡后刷新选项卡视图

Question

我正在使用离子选项卡。从数据库中产生的某些选项卡（包括那些没有图标）

现在，当我添加一个新的标签，并刷新阵列我应该得到3个动态标签。相反，我有5个（前两个和前两个与最新创建的选项卡）尽管阵列正确地有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

尝试触发手动更改检测 -

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

}