Angular 中过滤当前用户以避免重复显示

在 angular 应用中，当通过 api 获取“相似用户”列表时，若响应数据默认包含当前查看的用户（id 相同），需在组件层对 `data.data` 数组执行 id 过滤，剔除与当前路由参数一致的用户项，确保列表仅展示其他关联用户。

在实际开发中，后端返回的相似用户接口（如 /customer/12345/similar）有时会将当前用户本身也包含在结果首项中。虽然理想方案是让后端修正逻辑，但前端快速、健壮的处理方式是在接收响应后立即过滤掉重复项。

关键在于：不要直接将整个 data 赋值给 this.similarClients，而应先对 data.data 数组进行 filter() 操作，排除 id 与当前路由参数一致的元素。

以下是优化后的 getCustomerSimilar() 方法实现：

getCustomerSimilar() {
  const currentId = Number(this.route.snapshot.paramMap.get('id'));
  this.customerService.getCustomerSimilar(currentId).subscribe({
    next: (response) => {
      // 安全过滤：仅保留 id 不等于当前用户的项
      this.similarClients = response.data.filter(item => item.id !== currentId);
    },
    error: (err) => {
      console.error('获取相似用户失败:', err);
    }
  });
}

⚠️ 注意事项：

• 原答案中 data.data = ...; this.similarClients = data; 的写法存在两个问题：一是修改了原始响应对象（不推荐副作用）；二是 this.similarClients 类型应为 CustomerSimilar['data']（即 Array），而非整个 CustomerSimilar 对象。因此应直接赋值过滤后的数组。
• 接口模型需修正以匹配真实 JSON 结构：id 字段在示例中为字符串（"12345"），但 TypeScript 接口声明为 number，易导致类型不安全。建议统一使用 string 或在服务层做转换：

// 推荐的接口定义（适配字符串 ID）
export interface SimilarCustomer {
  id: string;
  name: string;
  vat_number?: string;
  email?: string;
}

export interface CustomerSimilar {
  data: SimilarCustomer[];
}

• 若需支持空值防护（如 response?.data 可能为 undefined），可增强过滤逻辑：

this.similarClients = Array.isArray(response?.data)
  ? response.data.filter(item => item.id !== String(currentId))
  : [];

最后，在模板中保持原有 *ngFor 逻辑即可，无需额外判断：

✅ 总结：该方案轻量、可维护性强，完全在组件层解耦处理，不依赖后端调整；同时兼顾类型安全、空值防护与可读性，是 Angular 中处理“排除自身”的典型实践。