首页 文章

Angular 2 * ngFor不显示数据

提问于
浏览 次
0

我正在使用Ionic 2和Angular 2的应用程序 . 现在我正在尝试从API中获取数据并在页面上显示它 .

我可以记录数据，我认为这是正确的，但由于某种原因，页面本身没有显示任何内容：

enter image description here

我收到数据的API位于：http://peerligthart.com/grotekerk/v1/api.php/zerken?transform=1

*ngFor on my view

<ion-content padding>
  <h1 *ngFor="let z of zerken">
    {{ z.naam }}
  </h1>
</ion-content>

Controller

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
    });
  }

}

And last, the provider

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;
  }

}

那么，页面显示的是什么：

enter image description here

你可以看到..什么都没有 . 我希望有人有解决方案，亲切的问候！

-------------EDIT-------------

我将 this.zerken = data.zerken.results 更改为 this.zerken . 这样做后，它给了我一个错误：

enter image description here

javascript angularjs angular ionic-framework ionic2

2 回答

  • 2

    您需要 *ngIf 封装 *ngFor ，因为 zerken 是在稍后的时间点获得的 .

    尝试：

    <ion-content padding>
 <div *ngIf="zerken">
  <h1 *ngFor="let z of zerken">
    {{ z.naam }}
  </h1>
</div>
</ion-content>

    您还需要在@ AJT_82的其他答案中设置 zerken = data.zerken; .

    回复于
  • 6

    您的回复中的 zerken 似乎没有 results 对象，所以

    this.zerken = data.zerken.results;

    应该：

    this.zerken = data.zerken;

    请记住初始化组件中的数组：

    zerken: Array<any> = [];

    这样你就不会得到zerken未定义的错误，因为通常在收到数据之前呈现视图 . 初始化它将阻止这种情况 .

    回复于

相关问题