I'm new to Ionic and I'm using Ionic 3.5 with AngularIO, for my case the problem is after ajax call I'm getting the data from service but the view is not updating in emulator. Though the view is getting render properly in web version. Here is my component and html
export class HomePage {
private tagService: TagService;
public tagData: any;
constructor(public navCtrl: NavController) {
this.tagService = new TagService();
this.loadTags();
}
private loadTags() {
this.tagService.getTagData().then((data)=>{
this.tagData = data;alert(JSON.stringify(data));
}, ()=>{
alert("Error occured");
});
}
}
<ion-item *ngFor="let tag of tagData" (click)="tagClicked($event)" class="activity" color="positive" data-item="tag">
{{tag.name}}
<ion-icon name="{{tag.icon}}" item-right></ion-icon>
</ion-item>
The service method is here
public getTagData() :Promise<Tag[]> {
let promise: Promise<Tag[]>;
promise = new Promise((resolve, reject)=>{
$.ajax({
url: "data/tag.data.json",
success: (data) => {
this.tags = data;
resolve(this.tags);
},
error: () => {
reject();
}
});
});
return promise;
}
I Think you are returning observable
instead of promise
from the loadTags
function. In that case subscribe to an event instead of using then
private loadTags() {
this.tagService.getTagData().subscribe((data) => {
this.tagData = data;
alert(JSON.stringify(data));
}, (error) => {
alert("Error occured");
})
}
do not use jquery ajax
syntaxes. use angular 2 inbuilt components
public getTagData(): any {
return this.http.get("data/tag.data.jso")
}