Ionic应用修改displayedList后页面未更新，如何实现页面重载？

我在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);
      }
    );
    // 输出符合预期的正确结果
    console.log(this.displayedList);
  }
}

现在的问题是：代码逻辑没问题，console.log也能输出正确的筛选结果，但页面就是不更新，还是显示所有列表项，怎么才能让底层数据displayedList修改后页面自动刷新？

这个问题我之前也碰到过，核心原因是Angular的变更检测机制没捕捉到displayedList的变化——因为你用了jQuery的$.grep方法，它属于Angular生态外的操作，Angular没法自动感知到数组的更新。给你几个可行的解决办法：

方法一：用Angular原生数组方法替代jQuery #

直接用JavaScript数组的filter方法代替$.grep，这样Angular能自动检测到数组的变化，页面就会跟着更新了：

public onInput(inputEvent: Event):void {
  this.initializeList();
  const query = this.searchQuery;
  if (query) {
    // 用原生filter替代$.grep
    this.displayedList = this.defaultList.filter(item => item.name.includes(query));
    console.log(this.displayedList);
  } else {
    // 处理query为空的情况，恢复显示全部列表
    this.displayedList = [...this.defaultList];
  }
}

方法二：手动触发Angular变更检测 #

如果你一定要保留jQuery的$.grep，可以手动告诉Angular数据已经变化，需要更新视图。步骤如下：

1. 先导入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

2. 在组件的构造函数中注入这个服务：

constructor(private cdRef: ChangeDetectorRef) {}

3. 在修改displayedList之后，调用detectChanges()方法触发变更检测：

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);
      }
    );
    console.log(this.displayedList);
    // 手动触发变更检测
    this.cdRef.detectChanges();
  }
}

额外提醒 #

别忘了在query为空的时候，把displayedList恢复成完整的defaultList，这样用户清空搜索框时能重新看到所有列表项。

内容的提问来源于stack exchange，提问作者herhuf