Tengo el siguiente Home.ts que llama a un servicio, ProductService.ts para obtener una lista de objetos de Storage que represento en home.html.
export class HomePage { products; constructor(public navCtrl: NavController, private productService: ProductService, private storage : Storage) { } ngOnInit(){ this.productService.fetchProducts(); this.products = this.productService.products; } } export class ProductService{ fetchProducts(){ this.storage.get('products') // returns a promise which returns data or error .then( (products) => { products? this.products = products : this.products = []; }) .catch( err => console.log(err) ); } }El listado no funciona y me sale una página en blanco. Pero si copio el código de ProductService y lo pego directamente en home.ts, funciona (ver más abajo).
export class HomePage { products; ngOnInit(){ this.storage.get('products') // returns a promise which returns data or error .then( (products) => { products? this.products = products : this.products = []; }) .catch( err => console.log(err) ); } }Me gustaría tener el código en ProductService. Y no sé por qué está funcionando de esta manera.
fetchProducts es asíncrono, debe usar los resultados dentro de una devolución de llamada exitosa que esta función podría tomar como parámetro:
fetchProducts(success: (products: any[]) => void): void { this.storage .get("products") .then(products => callback(products || [])) .catch(err => console.log(err)); }y luego:
ngOnInit() { this.productService.fetchProducts(products => this.products = products); } Otras posibilidades incluyen hacer que fetchProducts devuelva una Promise u Observable para que pueda suscribirse en su método ngInit .