*ngIf 对象填充后不更新

Question

我有一个简单的列表页面，我在其中声明了一个通过 API:

填充的 pokemons 变量

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

在我看来，我有一个 ngFor，它循环遍历这些口袋妖怪并显示每个口袋妖怪。

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

但是 ngIf 从不刷新并且始终显示白页。即使 'pokemons' 被填满。

Answer 1

用 div 包装 ion-content 会导致视图无法呈现。
下面是一个实时工作示例。尝试在 ion-content 上使用 *ngIf。

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

*ngIf 对象填充后不更新

*ngIf not updating after Object is filled

angular-ng-if

ionic-framework

angular