Ionic 2 PromiseのアイテムをngOnInitにロード

Question

私はhome.tsにservice.tsを呼び出して、Storageからアイテムをロードしています。

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) 
    );   
    } 

次に、項目をhome.htmlにレンダリングします。 問題は、アプリが起動して初めてア​​イテムが表示されないことです。しかし、別の画面に移動してhome.tsに戻ると、項目は正常に表示されます。私はこれがionViewDidEnterであることを理解しています。おそらく最初の回では、fetchProductsの約束事は非同期です。しかし、どのように最初のラウンドで商品をngOnInitに登録するのですか？

Answer 1

あなたの非同期問題がコールバック内で操作を行っている処理する方法：

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

あなたがここにもreturnステートメントを追加する必要があります

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

はここplunkerの例です：http://plnkr.co/edit/ONOg4FChJpCG81gM7Vlt?p=preview

Answer 2

私が見るように、あなたは2つの異なる方法でそれを行うことができます...

一度情報をプリロード）

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

---

1：typescriptですが、それは製品のリストとの約束を返すことを理解しているよう

まず方法を変更するので、あなたは（おそらく一度だけfetchProductsメソッドを呼び出しますメモリの製品をロードするために、次にあなたがするので、データのホームページで

// 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; }); }); } 

そしてを取得するためにproductsプロパティを使用します順序で起動）ストレージからユーザーがホームページに入るたびに製品を入手

export class HomePage { 

    products; 

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

} 

---

2）：データがメモリに既にある、あなただけのサービスからproductsプロパティを使用することができます

export class HomePage { 

     products; 

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

    }