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

修改数据后重新加载页面

1 个答案: