我正在使用离子标签。一些选项卡是从数据库(没有图标的那些)生成的
现在,当我添加一个新标签并刷新数组时,我应该得到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查询中订购我想要的方式。
答案 0 :(得分:0)
尝试手动触发变更检测 -
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]
});
});
}
}
答案 1 :(得分:0)
在构造函数中使用它来检测更改并刷新页面。
constructor(private ref: ChangeDetectorRef){}
refreshTabs() {
this.databaseService.getCategories().then(categories => {
this.categories = categories;
console.log(this.categories); // [Object, Object, Object]
this.changeDetectorRef.detectChanges();
});
});
}
答案 2 :(得分:0)
refreshTabs() {
this.databaseService.getCategories().then(categories => {
this.categories = categories;
this.categories = [...this.categories]
console.log(this.categories); // [Object, Object, Object]
});
}
你可以应用这个。
答案 3 :(得分:0)
我认为目前解决此问题的最佳方法是这样做:
// Wherever you are calling push, refresh the tabs as well
// Like this:
yourMethodWhereYouPush() {
this.category.push({id: 1, name: 'a category name'});
this.refreshTabs(); // Add this line so that once you push it, immediately the tabs will be refreshed with new data;
}