Search code examples
angularionic-frameworkionic3ionic-view

View is not updating in Ionic 3.5


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

Solution

  • I Think you are returning observable instead of promise from the loadTagsfunction. 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")
    }