[英]Can't access data from Http in Ionic 2
我正在尝试在Ionic 2中使用HTTP从Blogspot API获取数据。
这是我创建的用于与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;
}
);
}
}
这是我创建的用于测试数据的组件。
**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>
当我单击按钮时,它在控制台中显示了一个类似这样的对象,
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"
每个对象项中都有诸如标题和内容之类的元素。 但是,我无法检索其中任何一个。
我试过了,但是没用!
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>
没事! 它给了我诸如未定义的错误!
您之所以变得不确定,是因为视图是在接收数据之前加载的,并且*ngFor
最初获取的是undefined
datas
。
在网格中使用*ngIf
来确保在接收到数据后加载循环。 就像@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)
);
}
第二路
<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.