http.get 不将数据传递给页面类变量

Question

我能够使用 http.get 从 api 获取数据，在 http.get console.log 中显示数据，但从 http 中获取它显示未定义的数据，即使没有将数据设置为 html 中的类变量，它也会给出未定义的错误这是我在提供者中获取数据的方式

提供者方法

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 数据

这是我来自 api 的 json 数据，我只创建一个请求来获取主页数据，数据有点复杂。

{
    "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"
                }
            }
        ]
    ]
}

其他版本的 json 数据仅用于横幅

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

Answer 1

我会更改您的代码中的一些内容以使其正常工作：

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 :)

}

就像你在那里看到的那样，我使用 toPromise 运算符将 observable 转换为 promise，并且我还使用 map 运算符将数据保存在 this.data 中，而不是订阅可观察的。

那么当你想调用那个方法时，你只需要：

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