Data not display in template

databinding

#1

I create app to show posts from WordPress REST API with subscribe, buat after subscribe success data not showing in template.

Here my code:
component.ts

import { Component, OnInit, ChangeDetectionStrategy, NgZone } from "@angular/core";
import { PostsService } from "../providers/posts/posts.service"; //rest api
import * as Geolocation from "nativescript-geolocation"; //Geolocation
import { Accuracy } from "ui/enums"; //nilai geolocation
import * as utils from "utils/utils"; //fungsi u/ context

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomeComponent implements OnInit {

    // posts
    public paged: number = 1;
    public posts: any;

    constructor(private postsServices: PostsService, private ngZone: NgZone) {
        this.loadPost();
    }

    ngOnInit() {
        console.log('INIT');
    }

    // List posts
    public loadPost() {
        this.postsServices
            .getPostList(this.paged)
            .subscribe(res => {
                this.ngZone.run(() => {
                    this.posts = res;
                    console.log(this.posts); 
                });
            });
    }
}

component.html

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<StackLayout class="p-20">
    <ListView [items]="posts">
	    <ng-template let-item="item">
	        <StackLayout>
	            <Label [text]='" Id " + item.id'></Label>
	        </StackLayout>
	    </ng-template>
	</ListView>
</StackLayout>

serivces.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable as RxObservable } from "rxjs";

@Injectable()
export class PostsService {

 	WORDPRESS_URL: string = 'http://api.lokapolis.com/';
	WORDPRESS_REST_API_URL: string = this.WORDPRESS_URL + 'wp-json/wp/v2/';

  	constructor(
  		private httpClient: HttpClient ) { 
  		
  	}

  	// post terbaru
	public getPostList(paged:number) {
		return this.httpClient.get(this.WORDPRESS_REST_API_URL + 'posts' + '/?page=' + paged);
	}

}

In console.log return data:

[{
JS:   "id": 71,
JS:   "date": "2018-07-26T11:47:52",
JS:   "date_gmt": "2018-07-26T04:47:52",
JS:   "guid": {
JS:     "rendered": "http://api.lokapolis.com/index.php/2018/07/26/promo-nastar-25-hanya-hari-ini/"
JS:   },
JS:   "modified": "2018-07-26T11:47:52",
JS:   "modified_gmt": "2018-07-26T04:47:52",
JS:   "slug": "promo-nastar-25-hanya-hari-ini",
JS:   "status": "publish",
JS:   "type": "post",
JS:   "link": "http://api.lokapolis.com/index.php/2018/07/26/promo-nastar-25-hanya-hari-ini/",
JS:   "title": {
JS:     "rendered": "Promo nastar 25% hanya hari ini!"
JS:   },
JS:   "content": {
JS:     "rendered": "<p>Dapatkan potongan harga sampai 25% per kilo untuk pembelian minimal 5 kg. Minat call ato wa 097639773</p>\n",
JS:     "protected": false
JS:   },
JS:   "excerpt": {
JS:     "rendered": "<p>Dapatkan potongan harga sampai 25% per kilo untuk pembelian minimal 5 kg. Minat call ato wa 097639773</p>\n",
JS:     "protected": false
JS:   },
JS:   "author": 1,
JS:   "featured_media": 70,
JS:   "comment_status": "closed",
JS:   "ping_status": "closed",
JS:   "sticky": false,
JS:   "template": "",
JS:   "format": "standard",
JS: ...

what missing, please help.


#2

Try removing the stack layout that wraps the list view. And you don’t need ngZone when you work with Observable.


#3

Thanks for reply, but not working to.


#4

It works on my end, if you can reproduce the issue with Playground let us know.


#5

Okay, thanks. Now working after remove all Stacklayout