Ionic 2:添加新动态选项卡后刷新选项卡视图

Question

我正在使用离子标签.一些选项卡是从数据库生成的(没有图标的选项卡)

现在当我添加一个新标签并刷新数组时,我应该得到3个动态标签.相反,我有5个(前2个和前2个具有最新创建的选项卡)尽管数组正确有3个对象.

[对象,对象,对象]

所以这里的相关代码(tabs组件有一个监听选项卡创建的事件):

// 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( '类:创建');

tabs.html:

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

知道为什么选项卡上的视图不正确吗？

更新:

它似乎正在使用this.category.push({id: 1, name: 'a category name'})但我宁愿刷新整个数组,所以我可以从sql查询中订购我想要的方式.

主题也已发布在离子论坛上

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

}