0
370
VistasIonic 2: Actualizar la vista de pestañas después de agregar una nueva pestaña dinámica
Estoy usando pestañas iónicas. Algunas pestañas se generan desde la base de datos (las que no tienen iconos)
Ahora, cuando agrego una nueva pestaña y actualizo la matriz, debería obtener 3 pestañas dinámicas. En cambio, tengo 5 (los 2 anteriores y los 2 anteriores con la pestaña creada más nueva) A pesar de que la matriz tiene 3 objetos correctamente.
[Objeto, Objeto, Objeto]
Así que aquí el código relacionado (el componente de pestañas tiene un evento que escucha la creación de una pestaña):
// 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] }); } }Entonces, cada vez que agrego o edito una pestaña, llamo:
this.events.publish('categoría:creado');
pestañas.html:
<ion-tab [root]="tab2Root" tabTitle="{{ category.name }}" [rootParams]="category.id" *ngFor="let category of categories"></ion-tab>¿Alguna idea de por qué la vista en las pestañas es incorrecta?
ACTUALIZAR :
Parece que usar this.category.push({id: 1, name: 'a category name'}) está funcionando, pero preferiría actualizar toda la matriz para poder ordenarla de la manera que quiero desde la consulta sql.
3 Respuestas
Responde la pregunta0
Intente activar la detección de cambios manualmente -
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] }); }Puedes aplicar esto.
0
Creo que la mejor manera de resolver este problema por ahora es hacer esto:
// 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; }