我正在使用将Ionic 2与Angular 2结合使用的应用程序。现在,我正在尝试从API提取数据并将其显示在页面上。

我可以记录数据,但我认为它是正确的,但是由于某些原因,页面本身未显示任何内容:

javascript - Angular 2 * ngFor不显示数据-LMLPHP

我从中接收数据的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;
  }

}


因此,页面显示的内容是:

javascript - Angular 2 * ngFor不显示数据-LMLPHP

如您所见..什么都没有。希望有人能解决,谢谢!

- - - - - - -编辑 - - - - - - -

我将this.zerken = data.zerken.results更改为this.zerken。完成此操作后,出现错误:

javascript - Angular 2 * ngFor不显示数据-LMLPHP

最佳答案

您的响应中的zerken似乎没有results对象,因此

this.zerken = data.zerken.results;


应该:

this.zerken = data.zerken;


记住要在组件中初始化数组:

zerken: Array<any> = [];


这样您就不会收到未定义zerken的错误,因为视图通常是在接收数据之前渲染的。对其进行初始化将防止这种情况。

09-06 04:44