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

Question

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

中获取数据

提供者方法

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

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

{
    "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 运算符将可观察对象转换为承诺，并且我还使用 map 运算符将数据保存在 this.data 而不是订阅可观察对象。

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

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

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

http.get not passing data to page class variable

rxjs

typescript

ionic2

ionic3

angular