数据修改后重新加载页面

Question

我的 Ionic 应用程序包含一个显示项目列表的页面。该列表应该可以通过搜索栏进行搜索。我这样实现了搜索栏

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{pageTitle}}</ion-title>
  </ion-navbar>

  <ion-searchbar 
    [(ngModel)]="searchQuery" 
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="onInput($event)">
  </ion-searchbar>

</ion-header>
<ion-content>
  <ion-list>
    <ion-card *ngFor="let item of displayedList">

      <ion-card-header left color="primary">
        <ion-icon name="person" padding-right></ion-icon>
        {{item.name}}
      </ion-card-header>

    </ion-card>

  </ion-list>
</ion-content>

onInput 方法看起来像这样

public onInput(inputEvent: Event):void {
    this.initializeList();
    var query:string = this.searchQuery;

    if (query) {
      this.displayedList = $.grep(
        this.defaultList,
        (item, index) => {
          return item.name.includes(query);
        }
      );
      // gives expected correct output
      console.log(this.displayedList);

    }
  }

其实效果很好，即使grep调用后的输出也是正确的。但是页面不会更新，仍然会显示所有列表项。如何在基础数据（displayedList）更改后重新加载页面？

Answer 1

尝试(ngModelChange) 而不是(ionInput)。