*ngIf not updating after Object is filled

Question

I have a simple list page in which i declare a pokemons variable that gets filled through an API:

export class ListPage implements OnInit { 
public pokemons: any;

constructor(public navCtrl: NavController, public pokemonProvider: PokemonProviderService, public parametersProvider: ParameterProviderService) {
  }


  ngOnInit() {
      this.counter = 1;
      this.pokemonProvider.getPokemons(this.counter).subscribe(result => this.pokemons = result);
      this.counter++;
  }
}

in my view i then have an ngFor, that loops through those pokemon and shows each one.

<div *ngIf="pokemons">
<ion-content>
  <ion-list>
    <ion-item *ngFor="let pokemon of pokemons.results" (click)="showDetails(pokemon)">
      <!--<ion-icon [name]="item.icon" slot="start"></ion-icon>-->
      <!--<button ion-button ></button>-->
      <h3> {{pokemon.name}} </h3>

    </ion-item>
  </ion-list>
  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
            loadingSpinner="bubbles"
            loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <!--
    <div *ngIf="selectedItem" padding>
      You navigated here from <b>{{selectedItem.title }}</b>
    </div>
  -->
</ion-content>
</div>

however the ngIf never refreshes and always shows a white page. Even though 'pokemons' gets filled.

Answer 1

Wrapping ion-content with div causes view to not render.
Below is a live working example. Try to use *ngIf on ion-content instead.

https://stackblitz.com/edit/ionic-vndmrx