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

Posted 2023-03-13

【中文标题】http.get 不将数据传递给页面类变量

【英文标题】：http.get not passing data to page class variable

【发布时间】：2017-12-02 07:08:29

【问题描述】：

我能够使用 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" >
  </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"
    
]

【问题讨论】：

.map(res => res.json()) 应该是.map(res => return res.json())，对吧？

@camaron 不，返回是隐式的，除非您在箭头右侧有一个块。

发布准确完整的错误信息。

@JBNizet 谢谢你的解释。

帮自己一个忙，不要在承诺中包装 http 请求

【参考方案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.
);

【讨论】：

没有运气，结果仍然相同，未定义。为什么在 ionic 1 中使用 http 获取数据如此复杂，这真的很容易。有没有简单的方法来获取角度和离子数据，我已经更新了我的问题，你也可以在其中找到我的 api json 数据。

如果你把它添加到你的视图会发生什么？：<p> homeData | json </p>

它让我发疯，现在我喜欢真正的问题是离子滑块自动播放是问题的根源。我很容易获取数据

所以数据正在正确获取，对吧？如果是这种情况，请将答案标记为已接受，以便我们关闭问题:)

你能告诉我如何检查错误，如404，上述方法的401错误。