Angular控制器中过滤后的变量在输入变化时未更新

你遇到的核心问题是过滤逻辑仅在控制器初始化时执行了一次，当输入内容变化时没有触发重新过滤，导致games数组无法同步更新。下面给你几种实用的解决方案：

方案一：使用$watch监听搜索关键词变化 #

通过$scope.$watch监听搜索文本的变化，每次变化时自动重新执行过滤逻辑：

export class CartController implements ng.IComponentController {
  public static $inject = ['GamesService', 'filterFilter', '$scope'];
  public games: Game[];
  public allGames: Game[]; // 保存所有原始游戏数据，避免重复请求
  public searchText: string; // 绑定到输入框的搜索关键词

  constructor(
    public gamesService: GamesService, 
    private filterFilter: ng.IFilterFilter,
    private $scope: ng.IScope
  ) {
    // 初始化获取所有游戏数据
    this.allGames = this.gamesService.getGames(); // 假设你的GamesService有这个方法
    // 首次执行过滤
    this.filterGames();

    // 监听搜索文本变化，触发重新过滤
    this.$scope.$watch(() => this.searchText, () => {
      this.filterGames();
    });
  }

  // 封装过滤逻辑为私有方法
  private filterGames() {
    this.games = this.filterFilter(this.allGames, this.searchText);
  }
}

对应的模板中，需要把输入框绑定到控制器的searchText属性：

<input type="text" ng-model="$ctrl.searchText" placeholder="搜索游戏...">

方案二：通过ng-change主动触发过滤 #

如果不想用$watch，可以在输入框的ng-change事件中手动调用过滤方法，更直观可控：

export class CartController implements ng.IComponentController {
  public static $inject = ['GamesService', 'filterFilter'];
  public games: Game[];
  public allGames: Game[];
  public searchText: string;

  constructor(
    public gamesService: GamesService, 
    private filterFilter: ng.IFilterFilter
  ) {
    this.allGames = this.gamesService.getGames();
    this.filterGames();
  }

  // 暴露过滤方法给模板调用
  public filterGames() {
    this.games = this.filterFilter(this.allGames, this.searchText);
  }
}

模板中添加ng-change指令：

<input type="text" ng-model="$ctrl.searchText" ng-change="$ctrl.filterGames()" placeholder="搜索游戏...">

方案三：监听组件输入属性变化（如果games是外部传入的） #

如果你的games是通过组件绑定从外部传入的，需要用$onChanges监听输入属性的变化，确保外部数据更新时也能重新过滤：

export class CartController implements ng.IComponentController {
  public static $inject = ['filterFilter'];
  public games: Game[];
  public searchText: string;
  // 定义组件输入属性
  public originalGames: Game[];

  constructor(private filterFilter: ng.IFilterFilter) {}

  // 监听输入属性变化
  public $onChanges(changes: ng.IOnChangesObject) {
    // 当originalGames更新时重新过滤
    if (changes.originalGames && !changes.originalGames.isFirstChange()) {
      this.filterGames();
    }
  }

  private filterGames() {
    this.games = this.filterFilter(this.originalGames, this.searchText);
  }
}

同时需要在组件定义中添加绑定配置：

export class CartComponent implements ng.IComponentOptions {
  public controller = CartController;
  public template = template;
  public bindings = {
    originalGames: '<' // 单向绑定外部传入的游戏数据
  };
}

关键原理说明 #

你最初的代码只在构造函数中执行了一次filterFilter，而构造函数仅在控制器初始化时运行一次。当用户输入内容变化时，必须通过监听变化或主动触发的方式，重新执行过滤逻辑，才能更新games数组并同步到视图。

内容的提问来源于stack exchange，提问作者i.k