Question

我能够使用http.get从api中获取数据，在http.get console.log中显示数据，但是在http之外，它显示未定义的数据，甚至没有将数据设置为html中的类变量，它给出了undefined的错误这是我如何获取提供商的数据

提供商方法

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而不是订阅observable。

然后，当您想要调用该方法时，您只需要：

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

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

1 个答案: