Angular数组首次筛选后失效问题求助

算力阿峰

2026-7-4

Angular数组筛选异常排查与修复

问题分析

切换下拉框选择剧集季数时，筛选仅首次调用生效，后续筛选结果始终为空。控制台确认seriesService.giro每次都返回完整剧集数据，但筛选逻辑无法得到匹配结果。

核心原因：类型不匹配

最常见的触发场景是**selectedSeason的类型与episode.seasonNumber的类型不一致**：

初始值selectedSeason: number = 1是数字类型，但下拉框选择后，selectedSeason可能被转为字符串类型（比如seasonList是字符串数组，或HTML select的value默认处理为字符串）。
筛选时使用全等===比较，字符串与数字无法匹配，导致后续筛选结果为空。

修复方案

方案1：统一类型为数字

确保下拉框绑定的season是数字类型，同时筛选时保持类型一致：

确认seriesService.seasonList是number[]类型（而非string[]）。
若接口返回的episode.seasonNumber是字符串，先转为数字再比较：

filterEpisodesBySeason(season: number): any[] {
  return this.seriesService.giro.filter(episode => 
    Number(episode.seasonNumber) === season
  );
}

方案2：强制转换选中值类型

在onSeasonChange中把selectedSeason转为数字：

onSeasonChange() {
  const seasonNum = Number(this.selectedSeason);
  this.filteredEpisodes = this.filterEpisodesBySeason(seasonNum);
}

方案3：使用非全等比较（临时应急方案）

将筛选逻辑中的===改为==，允许类型隐式转换：

const filteredEpisodes = this.seriesService.giro.filter(episode => 
  episode.seasonNumber == season
);

额外验证步骤

在filterEpisodesBySeason中打印类型信息，确认两者类型是否一致：

filterEpisodesBySeason(season: number): any[] {
  console.log('Season type:', typeof season);
  console.log('Episode season type:', typeof this.seriesService.giro[0]?.seasonNumber);
  // ... 原筛选逻辑
}