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不会刷新，并且始终显示白页。即使“宠物小精灵”被装满了。

Answer 1

用div包裹离子含量会导致视图无法渲染。
下面是一个实时示例。尝试对离子含量使用* ngIf。

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

* ng如果在填充对象后未更新

1 个答案: