http.get nicht übergeben Daten an Seite Klassenvariable

Question

Ich bin in der Lage, Daten von einem API mit http.get, in http.get console.log Daten zeigen, aber von http bekommen zeigen undefinierte Daten sogar nicht Daten zu setzen Klassenvariablen in html es hier Fehler undefiniert geben ist, wie ich Daten in Anbieter

Anbieter Methode bin immer

if (this.data) { 
    return Promise.resolve(this.data); 
    } 

    return new Promise(resolve => { 
     this.http.get(SERVER_NAME+'home') 
      .map(res => res.json()) 
      .subscribe(data => { 
      this.data = data; 
      resolve(this.data); 
      }); 

     }); 

home.ts

this.homeService.getHomeData().then(data => { 
     this.homeData = data; 
     console.log(this.homeData); // here it is showing data. 
    }); 

home.html

<ion-slides class="home-slide" autoplay="3000" loop> 
    <ion-slide *ngFor=" let banner of homeData"> 
     <img src="assets/images/1_2.jpg" class="img-responsive" alt=""> 
    </ion-slide>   
</ion-slides> 

API-Daten

hier ist meine Json Daten von api kommen, ich schaffe nur eine Anfrage Homepage Daten abzurufen, sind Daten, wenig komplex.

{ 
    "banners": [ 
     { 
      "image": "http://localhost/upload/banner-1.jpg" 
     }, 
     { 
      "image": "http://localhost/upload/banner-12.jpg" 
     } 
    ], 
    "watch_brands": [ 
     { 
      "name": "A", 
      "slug": "a" 
     }, 
     { 
      "name": "Brand from app", 
      "slug": "brand-from-app" 
     }, 
    ], 
    "watches": [ 
     [ 
      { 
       "name": "Geneve White Dial Y/G", 
       "slug": "geneve-white-dial-yg", 
       "brand_name": "Test Brand for watch", 
       "images": { 
        "200": "http://localhost/dwe/cdv_photo_00144.jpg", 
        "400": "http://localhost/dwe/cdv_photo_00144.jpg" 
       } 
      }, 
      { 
       "name": "Vintage Diamond Bezel and Bracelet White Dial Y/G", 
       "slug": "vintage-diamond-bezel-and-bracelet-white-dial-yg", 
       "brand_name": "Test Brand", 
       "images": { 
        "200": "http://localhost/dwe/cdv_photo_00530.jpg", 
        "400": "http://localhost/dwe/cdv_photo_00530.jpg" 
       } 
      } 
     ] 
    ] 
} 

andere Version von JSON-Daten nur für Banner

[ 
    { 
     "image": "http://localhost/upload/banner-12.jpg" 
    }, 
    { 
     "image": "http://localhost/upload/banner-1.jpg" 
    } 
] 

Answer 1

ich ein paar Dinge in Ihrem Code ändern würde, damit es funktioniert:

import 'rxjs/add/operator/toPromise'; // <- I've added this import 

public yourMethod(...): Promise<any> { 

    if (this.data) { 
    return Promise.resolve(this.data); 
    } 

    return this.http.get(SERVER_NAME + 'home') 
      .map(res => res.json()) 
      .map(data => { 

       // Save the data 
       this.data = data; 

       // Return the data to the subscribers 
       return this.data; 

       }) 
       .toPromise() // <- Transform the observable into a Promise :) 

} 

Wie Sie sehen können gibt, Ich verwende den Operator toPromise, um das Observable in ein Versprechen zu verwandeln, und ich benutze auch den Operator map, um die Daten in this.data zu speichern, anstatt das obs zu abonnieren machbar.

Dann, wenn Sie diese Methode aufrufen möchten, müssen Sie nur:

this.homeService.getHomeData().then(data => { 
    this.homeData = data; 
    console.log(this.homeData); // here it is showing data. 
});