无法从Ionic 2中的Http访问数据 [英] Can't access data from Http in Ionic 2

问题描述

我正在尝试使用Ionic 2中的HTTP从Blogspot API获取数据。
我的所有代码都在下面

I'm trying to get the data from Blogspot API using HTTP in Ionic 2. All of my codes are below

这是一项服务我创建了与HTTP和组件接口。

This is the service that I created to interface with HTTP and components.

  **HttpService.ts**

 export class Serverdata {
  constructor(private http: Http) { }

  getData() {
   return this.http.get(this.blogUrl)
    .map(
    (response: Response) => {
     const datas = response.json();
     return datas;
     }
    );
   }
 }

这是我为测试数据而创建的组件。

This is the component that I created to test the data.

  **Component.ts**

    constructor(public navCtrl: NavController, public navParams: 
                NavParams, private httpData : Serverdata) {}

        serverDataCall(){
           this.httpData.getData().subscribe(
           (datas) => console.log(datas),
           (error) => console.log(error)
           );
        }

这是组件模板

  **Component template**

    <ion-content padding>
    <button ion-button (click) = "serverDataCall()" > get </button>
    </ion-content>

当我点击按钮时，它会在控制台中显示一个像这样的对象，

When I click the button, it shows an object in the console which is something like this,

            Object {kind: "blogger#postList", 
             nextPageToken:"CgkIChihsOeVtioQo9Cj3-vl17BF", 
             items: Array(10), 
             etag: 
    ""h3phi6z0oROkI1XWpXsALUFHLuA/MjAxNy0wMy0zMVQwMjoxMzowNy45Mjda""}
     etag:
     ""h3phi6z0oROkI1XWpXsALUFHLuA/MjAxNy0wMy0zMVQwMjoxMzowNy45Mjda""
          items:Array(10)
           0:Object
           1:Object
           2:Object
           3:Object
           4:Object
           5:Object
           6:Object
           7:Object
           8:Object
           9:Object
           length:10
           kind:"blogger#postList"

每个对象项中都有诸如标题和内容等元素。但是，我无法找回它们中的任何一个。

There are elements such as title and content with in each of the object items. But, I wasn't able to retrieve any of them.

我试过这个，但它不起作用！

I tried this, but it didn't work!

      serverDataCall(){
           this.httpData.getData().subscribe(
           (datas : any []) => this.data = datas, //changed this line 
           (error) => console.log(error)
           );
          }

在模板中，

        <ion-content padding>
        <button ion-button (click) = "serverDataCall()" > get 
         lyrics</button>
           <ion-grid>
            <ion-row *ngFor="let data of datas">
             <ion-col>
              {{data.title}}
             </ion-col>
            </ion-row>
           <ion-grid>
        </ion-content>

没有任何效果！它给了我诸如undefined之类的错误！

Nothing worked! It gives me errors such as undefined!

推荐答案

由于您的视图在收到数据之前已加载并且您的 * ngFor 最初获得数据为 undefined 。

You are getting undefined because your view is loaded before the data is received and your *ngFor is getting datas as undefined initially.

在网格中使用 * ngIf 以确保在收到数据后加载循环。
同样如@echonax建议它应循环项目。

use an *ngIf in the grid to make sure the loop loads after data is received. Also as @echonax suggests it should loop through items.

 <ion-content padding>
        <button ion-button (click) = "serverDataCall()" > get 
         lyrics</button>
           <ion-grid *ngIf="datas && datas.items">
            <ion-row *ngFor="let data of datas.items">
             <ion-col>
              {{data.title}}
             </ion-col>
            </ion-row>
           <ion-grid>
        </ion-content>

这篇关于无法从Ionic 2中的Http访问数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！