List binding works only when page animation is used. Strange. What have I done wrong?


#1

Yeah, I know it is strange. I must have made some weird mistakes. Please direct me.

In the HTML page, I used a simple ion-list. The code is something like,

  <ion-list>
    <ion-item *ngFor="let item of Items">

And in the TS file,

  constructor(...)
  {
    this.API.getItems(...).then
    (
       result =>
       {
          this.Items = [];
          //for loop to push items into this.Items;
       }
    )
  }

  Items: ItemClass[];

It works when this page is pushed with an animation. But when the page is pushed without an animation, I could not see the item. There is no problem with the API, because I had added a console.log() inside the for loop, and I confirmed that I got the items when no animation was used.

If there is no automatic way, is there any way manually to inform the view that this.Items has changed? I could put that code after the for loop.

========Version Information================
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : android 6.3.0 browser 5.0.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.9.0
npm               : 5.5.1
OS                : Windows 10

#2

Yes, you can inform your view by this method that something changed in html file.

import {ChangeDetectorRef } from '@angular/core';

constructor(public DetectViewChange: ChangeDetectorRef) {
  
}

//Your Api Call Method
CallAPI(){
 // When you get responce from your api then call this method and update your HTML view
 this.DetectViewChange.detectChanges();
}

If any query then let me know.
Thanks


#3

Thank you. I inserted this.DetectViewChange.detectChanges() right after the for loop, and now the items are shown when animation is not used. By the way, do you have any clue why this happened? Manual notification is a hack, so if I could fix my code in a proper way, I would prefer that.