离子2:添加新的动态选项卡后刷新选项卡视图
问题描述:
我正在使用离子选项卡。从数据库中产生的某些选项卡(包括那些没有图标)离子2:添加新的动态选项卡后刷新选项卡视图
现在,当我添加一个新的标签,并刷新阵列我应该得到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查询的方式。
答
尝试触发手动更改检测 -
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]
});
});
}
}
+0
我记得我尝试过一些NgZone,当时它没有工作。你有没有试过去测试它?干杯! – Brieuc
动态标签似乎是开放问题https://github.com/driftyco/ionic/issues/10632和https:// github上。 com/driftyco/ionic/issues/10805 –
Bummer ...感谢您提供此信息。解决方案是实施我自己的标签吗?我不太喜欢这个解决方案,但我想我没有其他选择,我不能等待几周。 – Brieuc
您是否尝试过离子页面生命周期? https://saniyusuf.com/ionic-by-component-page-lifecycle/在构造函数中,您订阅了类别:创建的事件。您是否需要取消订阅并在刷新时重新订阅,也可以将服务呼叫夹在中间? – JGFMK