[英]Can't access data from Http in Ionic 2
I'm trying to get the data from Blogspot API using HTTP in Ionic 2. All of my codes are below 我正在尝试在Ionic 2中使用HTTP从Blogspot API获取数据。
This is the service that I created to interface with HTTP and components. 这是我创建的用于与HTTP和组件交互的服务。
**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)
);
}
And here is the component template 这是组件模板
**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)
);
}
And in template, 在模板中
<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>
Nothing worked! 没事! It gives me errors such as undefined!
它给了我诸如未定义的错误!
You are getting undefined because your view is loaded before the data is received and your *ngFor
is getting datas
as undefined
initially. 您之所以变得不确定,是因为视图是在接收数据之前加载的,并且
*ngFor
最初获取的是undefined
datas
。
use an *ngIf
in the grid to make sure the loop loads after data is received. 在网格中使用
*ngIf
来确保在接收到数据后加载循环。 Also as @echonax suggests it should loop through items
. 就像@echonax建议的那样,它应该遍历所有
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>
serverDataCall(){
this.httpData.getData().subscribe(
(datas : any []) => this.data.items = datas, //you can either do this and keep the the template code the same
(error) => console.log(error)
);
}
2nd way 第二路
<ion-content padding>
<button ion-button (click) = "serverDataCall()" > get
lyrics</button>
<ion-grid>
<ion-row *ngFor="let data of datas.items"> // or change it in the template and leave the service method unchanged
<ion-col>
{{data.title}}
</ion-col>
</ion-row>
<ion-grid>
</ion-content>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.