Ionic 2 Laden von Artikeln von Promise in ngOnInit

Question

Ich habe home.ts, die service.ts aufrufen, um Artikel aus dem Speicher zu laden.

export class HomePage { 

    products; 

    ionViewDidEnter() { 
    this.products = this.productService.products; 
    } 

    ngOnInit(){ 
     this.productService.fetchProducts();          
     this.products = this.productService.products; 
    } 
} 

export class ProductService{ 

    products; 

    fetchProducts(){  
    this.storage.get('products') // returns a promise which returns data or error  
     .then(
     (products) => { 
     // assign to this.expenses only if not null. When first //strt, can be null. If null, assign empty array [] 
      products? this.products = products : this.products = [];            
      console.log("fetch Products:" + this.products); 
      return this.products; 
     }) 
     .catch(
     err => console.log(err) 
    );   
    } 

ich die Einzelteile in home.html dann machen. Das Problem ist, die Artikel werden beim ersten Start der App nicht angezeigt. Wenn ich jedoch zu einem anderen Bildschirm navigiere und zu home.ts zurückkehre, werden die Elemente wieder gut gerendert. Ich verstehe, dass dies wegen ionViewDidEnter ist und vielleicht das erste Mal, das Versprechen in fetchProducts ist asynchron. Aber wie bekomme ich die Artikel zum ersten Mal auf ngOnInit Liste?

Answer 1

Ein Weg, um Ihr async Problem zu behandeln innerhalb des Rückrufs, um die Operation zu tun:

ngOnInit(){ 
     this.productService.fetchProducts() 
     .then((res)=>{ 
      this.products = this.productService.products; 
     });        
} 

Sie sollten auch eine return Aussage hier hinzufügen:

fetchProducts(){  
    return this.storage.get('products') // returns a promise which returns data or error  
     .then(.. 

Hier ist ein Plunker Beispiel: http://plnkr.co/edit/ONOg4FChJpCG81gM7Vlt?p=preview

Answer 2

Wie ich sehe, könnten Sie es auf zwei verschiedene Arten tun ...

zuerst die Methode ändern, so Typoskript versteht, dass es ein Versprechen mit einer Liste von Produkten zurückgibt:

fetchProducts(): Promise<Array<any>> { 
    // ... 
} 

---

1) im Voraus laden die Informationen einmal: so dass Sie nur einmal die fetchProducts Methode aufrufen (wahrscheinlich Start), um die Produkte im Speicher, und dann werden Sie verwenden, um die products Eigenschaft zu laden die Daten

// In your app.component.ts 
@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 

    public rootPage: any; // Don't assign the page here yet 

    constructor(private platform: Platform, 
       private productService: ProductService) { 
     this.platform.ready().then(() => { 
      // ... 

      this.productService.fetchProducts().then(() => { 
       this.rootPage = HomePage; 
      }); 
     }); 
    } 

und dann in der HomePage zu bekommen, da die Daten bereits auf Speicher, können Sie einfach die products Eigenschaft aus dem Dienst verwenden: jedes Mal,

export class HomePage { 

    products; 

    ionViewDidEnter() { 
    this.products = this.productService.products; 
    } 

} 

---

2) Kennenlernen der Produkte aus dem Speicher der Benutzer auf die Homepage gelangt:

export class HomePage { 

     products; 

     ionViewDidEnter() { 
     this.productService.fetchProducts().then((products) => { 
      this.products = this.productService.products; 
     }); 
     } 

    }