Olá, estou com uma dúvida a respeito da plataforma. Estou a desenvolver um sistema usando o que foi aprendido nos cursos de Ionic e encontrei um problema.
Estou tentando usar de dados externos (API), tanto para conseguir os produtos que quero mostrar, quanto as categorias que são mostradas em um Segment.
Os produtos são mostrados tranquilamente, e as categorias também, mas o Segment da página não funciona, deixando a navegação inacessível. Quando insiro manualmente os dados no array de categorias tudo funciona normalmente, mas quando puxo da API a navegação é quebrada.
Página de produtos:
import {Component} from '@angular/core';
import {IonicPage, LoadingController, Modal, ModalController} from 'ionic-angular';
import {Product} from "../../models/product";
import {Category} from "../../models/category";
import {ProductDetailsPage} from "../product-details/product-details";
import {ProductsServiceProvider} from "../../providers/products-service/products-service";
import {CategoriesServiceProvider} from "../../providers/categories-service/categories-service";
@IonicPage()
@Component({
selector: 'page-products',
templateUrl: 'products.html',
})
export class ProductsPage {
category: string = 'Vips';
productList: Array<Product> = [];
categoryList: Array<Category> = [];
constructor(private _modal: ModalController, private _loadingCtrl: LoadingController,
private _productsService: ProductsServiceProvider, private _categoryService: CategoriesServiceProvider) {
}
ionViewDidLoad() {
this._categoryService.list().subscribe((categories) => {
console.log('categorias carregadas!');
this.categoryList = categories;
}, error => console.log(error));
let loading = this._loadingCtrl.create({content: 'Carregando produtos...'});
loading.present();
this._productsService.list().subscribe((products) => {
products.map(product => {
product.category = this.categoryList.find(category =>
category.id === product.category_id);
product.features = product.features.split(',')
});
this.productList = products;
console.log(this.productList);
loading.dismiss();
}, error => console.log(error));
}
showDetails(product: Product) {
let myModal: Modal = this._modal.create(ProductDetailsPage.name, product);
myModal.present();
}
getProducts(category: Category) {
return this.productList.filter(product => product.category === category);
}
}Provider das categorias:
import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Category} from "../../models/category";
@Injectable()
export class CategoriesServiceProvider {
constructor(private _http: HttpClient) {
}
list() {
return this._http.get<Category[]>('http://localhost:3000/categories');
}
}Interface da Categoria:
export interface Category {
id : number;
name: string;
description: string;
}Template HTML:
https://gist.github.com/IanPedroV/8bbb0e271044573d33ad03b0976d8ddfAlgo estranho que notei, é que a página, é chamada diversas vezes antes mesmo do subscribe das categorias ser chamado, ou seja, a categoryList é chamada os ngFors do html várias vezes, e antes, da lista de categorias ser preenchida. Comportamento descrito: https://imgur.com/a/UUy92Pi
Caso o código do da Página de produtos seja este abaixo, tudo funciona como esperado:
https://gist.github.com/IanPedroV/9eaf8751be88ef9a5b4a5119db390d9aDesculpem pelo post gigante, só quis dar o máximo de informações possíveis, já tentei de tudo para resolver e nada. Detalhe: o JSON retornado pela API é idêntico ao que insiro manualmente. Talvez seja algum comportamento estranho do Segment mesmo... O carregamento dessa página é feito por LazyLoading e ela é mostrada dentro de uma TabsPage.
