angular - ngFor 更新时不更新 Ionic 模型中的列表，但如果模型在外部工作

Question

所以我有以下html：

<div>

    <ion-item id="homeTrigger" color="dark"></ion-item>


    <ion-modal trigger="homeTrigger">
      <ng-template>
        <ion-header color="dark" translucent>
          <ion-toolbar color="dark">
            <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="setFilteredItems($event.target.value)"></ion-searchbar>
          </ion-toolbar>
        </ion-header>

        <ion-content color="dark">
          <ion-list>
            <ion-item color="dark" *ngFor="let item of worldArray;"> {{ item.title }} </ion-item>
          </ion-list>
        </ion-content>
      </ng-template>
    </ion-modal>
<div>

  public worldArray: any = [];

  public setFilteredItems(searchTerm) {

    this.service.searchService(searchTerm).then((res) => {
      this.worldArray.splice(this.worldArray.length - 1, 1);
      this.worldAirportsArray = res;
      console.log(JSON.stringify(this.worldArray));
    });
  }

现在搜索 worldArray 时会更新。但模型内部的视图不是。如果我将搜索功能放在模型之外，那么视图会更新。那么我怎样才能使模型中的列表更新。请注意，如果我关闭模型然后重新打开它，则会显示更新的列表。

想知道我该如何解决这个问题？

谢谢

Answer 1

您可以使用 ChangeDetectorRef ( https://angular.io/api/core/ChangeDetectorRef#changedetectorref ) 每 0.5 秒或更长时间检查和更新列表...

例如：

constructor(private ref: ChangeDetectorRef) {
    console.log('Hello PhotoComponent Component');  
    setInterval(() => {
      this.ref.detectChanges();
    }, 500);  
  }