0
362
ViewsIonic 2 : Refresh tabs view after adding a new dynamic tab
I'm using ionic tabs. Some tabs are generated from database (the ones without icons)
Now when i add a new tab and refresh the array i should get 3 dynamic tabs. Instead i have 5 (the 2 previous ones and the 2 previous ones with the newest created tab) Despite the array correctly has 3 objects.
[Object, Object, Object]
So here the related code (the tabs component has an event that listen to a tab creation) :
// 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]
});
}
}
So anytime i add or edit a tab i call :
this.events.publish('category:created');
tabs.html :
<ion-tab [root]="tab2Root" tabTitle="{{ category.name }}" [rootParams]="category.id" *ngFor="let category of categories"></ion-tab>
Any idea why the view on the tabs is incorrect?
UPDATE :
It seems using this.category.push({id: 1, name: 'a category name'}) is working but i'd would rather refresh the entire array so i can order the way i want it from the sql query.
3 answers
Answer question0
Try triggering change detection manually -
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
refreshTabs() {
this.databaseService.getCategories().then(categories => {
this.categories = categories;
this.categories = [...this.categories]
console.log(this.categories); // [Object, Object, Object]
});
}
You can apply this.
0
I think the best way to solve this issue for now is to do this:
// 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;
}