我正在使用将Ionic 2与Angular 2结合使用的应用程序。现在,我正在尝试从API提取数据并将其显示在页面上。
我可以记录数据,但我认为它是正确的,但是由于某些原因,页面本身未显示任何内容:
我从中接收数据的API位于:http://peerligthart.com/grotekerk/v1/api.php/zerken?transform=1
* ng在我看来
<ion-content padding>
<h1 *ngFor="let z of zerken">
{{ z.naam }}
</h1>
</ion-content>
控制者
import { Component } from '@angular/core';
import { NavController, PopoverController } from 'ionic-angular';
import { PopoverPage } from '../popover/popover';
import { ZerkenProvider } from '../../providers/zerken';
@Component({
selector: 'page-lijst',
templateUrl: 'lijst.html',
providers: [ZerkenProvider]
})
export class LijstPage {
zerken: Array<any>;
constructor(public navCtrl: NavController, public popoverCtrl: PopoverController, public zerkenProvider: ZerkenProvider) {
this.zerkenProvider.getZerken().subscribe(
data => {
console.log(data.zerken);
this.zerken = data.zerken.results;
}
)
}
openPopover(event) {
let popover = this.popoverCtrl.create(PopoverPage);
popover.present({
ev: event
});
}
}
最后,提供商
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ZerkenProvider {
static get parameters() {
return [[Http]];
}
constructor(public http: Http) {
}
getZerken() {
var url = "http://peerligthart.com/grotekerk/v1/api.php/zerken?transform=1";
var response = this.http.get(url).map(res => res.json());
return response;
}
}
因此,页面显示的内容是:
如您所见..什么都没有。希望有人能解决,谢谢!
- - - - - - -编辑 - - - - - - -
我将
this.zerken = data.zerken.results
更改为this.zerken
。完成此操作后,出现错误:最佳答案
您的响应中的zerken
似乎没有results
对象,因此
this.zerken = data.zerken.results;
应该:
this.zerken = data.zerken;
记住要在组件中初始化数组:
zerken: Array<any> = [];
这样您就不会收到未定义zerken的错误,因为视图通常是在接收数据之前渲染的。对其进行初始化将防止这种情况。