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

}