I am facing an issue with Ionic 2. I have a problem where I need to display a card component using *ngFor with the title of an article and other data such as thumbnails, etc. When I hardcode values in the array, the card shows up fine. However, when I use a REST API, the card does not get rendered even though the data is retrieved successfully.
Is there something similar to $scope.$digest(); in Angular 1 to apply changes on $scope for Angular 2 (Ionic 2)? Or is there another way to achieve what I want?
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as $ from 'jquery';
import * as moment from 'moment';
var itemList =[];
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
moment.locale('id');
this.getNews();
}
getNews(){
$.ajax({
url: secret_api_url ,
dataType:"jsonp",
method:"get",
success:(data =>{
var post = data.posts;
post.forEach(function(p){
p.date = moment(p.date).format('lll');
itemList.push(p);
});
// itemList = post;
}),
error:(err =>{
console.log("Error",err);
})
});
}<ion-card padding *ngFor="let item of itemList;">
<ion-card-content>
< label style="color:white;">
{{i}}
<label class="timestamp">{{ item.date }}</label>
</label><br>
<small>
<i>
{{ item.short_desc }}
</i>
</small>
<ion-card-title>
{{item.title}}
</ion-card-title>
</ion-card-content>
<img src="{{item.img_url}}"/>
</ion-card>