Question

我正在尝试按照https://ionicacademy.com/http-calls-ionic/上的说明进行操作，将呼叫转换为我的服务（https://www.oakwoodnb.com/json/events.php）时，我可以将数据记录到控制台，但不会显示在屏幕上。知道为什么吗？

这是我的代码：

api.ts

    @Injectable()
    export class ApiProvider {

    constructor(public http: HttpClient) {
    console.log('Hello ApiProvider Provider');
    }

    getVerses() {
    return this.http.get('https://www.oakwoodnb.com/json/events.php');
    }

daily-verse.ts

    export class DailyVersePage {

    //Added to retrieve verses
    verses: Observable<any>;

    constructor(public navCtrl: NavController, public navParams:            NavParams, public apiProvider: ApiProvider) { 

    //Is this a race condition?
    this.verses = this.apiProvider.getVerses();

    this.verses
    .subscribe(data => {
    console.log('my data: ', data);
    })

    }

daily-verse.html

    <ion-list>
    <p ion-item *ngFor="let verse of (verses | async)?.results">
    Title: {{ verse.title }}
    </p>
    </ion-list>

除非启用了CORS Chrome扩展程序，否则我正在调用的API确实会失败，但是打开后它确实会登录到控制台。

Answer 1

我想出了答案。将其发布给那些可能像我一样被卡住的人。

我改变了

    <p ion-item *ngFor="let verse of (verses | async)?.results">

到

    <p ion-item *ngFor="let verse of (verses | async)?.items">

因为数据在第一个元素中返回的是“项”，而不是API中的“结果”。

Ionic 3-无法在页面上加载API数据

1 个答案: