Angular 2 *ngFor doesn't display data

Question

I'm working on an application using Ionic 2 together with Angular 2. Now I'm trying to the data from an API and display this on a page.

I can log the data and I think it's correct, but for some reason nothing is being displayed on the page itself:

The API where I'm receiving the data from is located here: 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;
  }

}

So, what the page is displaying itself:

As you can see.. nothing. I hope someone has a solution, kind regards!

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

I changed this.zerken = data.zerken.results to this.zerken . After doing this it's giving me an error:

Answer 1

Your zerken in your response doesn't seem to have an results object, so

this.zerken = data.zerken.results;

should be:

this.zerken = data.zerken;

Remember to initialize the array in your component:

zerken: Array<any> = [];

so that you won't get an error that zerken is undefined, since view is usually rendered before data has been received. Having it initialized will prevent that.

Answer 2

You need an *ngIf encapsulating the *ngFor since zerken is obtained at a later point of time.

Try:

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

Also you need to set zerken = data.zerken; as mentioned in the other answer by @AJT_82.