Angular PLAN字段过滤异常求助：输入4时误显示PLAN=8的条目

输入1过滤正常，但输入4时带出PLAN为8的结果，大概率是过滤逻辑或数据类型的问题，按以下步骤逐一排查：

1. 确认PLAN字段的数据类型 #

查看tarification-titre.response.ts中的字段定义，明确PLAN是number还是string类型：

// 示例接口定义
export interface TarificationTitreResponse {
  plan: number; // 或 string 类型
}

类型不匹配是隐式转换错误的常见根源。

2. 检查组件内的过滤逻辑（todo.component.ts） #

找到过滤数据的代码块，重点核查PLAN的匹配条件：

• 错误示例1：误用字符串包含匹配（虽此场景下8不会匹配4，但需排除）

  // 错误：仅适用于模糊匹配场景，会匹配所有包含目标值的结果
  filteredItems = this.items.filter(item => item.plan.toString().includes(this.filterValue));
  

• 错误示例2：类型不匹配的松散比较

  // 错误：==会触发隐式转换，可能导致意外匹配（但8 == "4"为false，此场景概率低）
  filteredItems = this.items.filter(item => item.plan == this.filterValue);
  

• 正确的精确匹配写法：

  // 确保类型一致后用===全等判断
  filteredItems = this.items.filter(item => item.plan === Number(this.filterValue));
  

同时添加调试日志，直观查看匹配过程：

filteredItems = this.items.filter(item => {
  const isMatch = item.plan === Number(this.filterValue);
  console.log(`PLAN: ${item.plan}, 过滤值: ${this.filterValue}, 是否匹配: ${isMatch}`);
  return isMatch;
});

3. 检查模板输入绑定（todo.component.html） #

确认输入框的值正确绑定到过滤变量，无额外转换错误：

<!-- 若PLAN是数字类型，建议用number类型输入框 -->
<input type="number" [(ngModel)]="filterValue" (input)="applyFilter()">
<!-- 若用文本输入，过滤时需手动转数字 -->
<input type="text" [(ngModel)]="filterValue" (input)="applyFilter()">

4. 排查服务端过滤逻辑（todo.service.ts） #

如果过滤是在服务端完成的，查看请求参数和服务端查询语句：

• 前端请求示例：

  getTarification(filterValue: number) {
    return this.http.get<TarificationTitreResponse[]>('/api/tarification', {
      params: { plan: filterValue.toString() }
    });
  }
  

• 服务端常见错误：误用LIKE模糊查询（如WHERE plan LIKE '%4%'），或错误将单个值作为范围查询的起始（如WHERE plan >= 4），导致包含8的结果被返回。

5. 检查变量名是否有误 #

确认过滤时判断的是plan字段，而非其他名称类似的字段（比如误写为floor等）。

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