Angular如何过滤相似用户列表中与当前用户ID相同的条目？

1. 修正数据模型类型匹配问题 #

API返回的用户ID是字符串类型（"id": "12345"），但你的数据模型里定义为number类型，这会导致类型不匹配，可能引发比较错误。先修正模型：

export interface CustomerSimilar {
  data: Array<{
    id: string; // 与API返回类型保持一致
    name: string;
    vat_number?: string; // 可选字段，对应模板中的vat_number
    email?: string; // 可选字段，对应模板中的email
  }>;
}

2. 在组件中过滤当前用户 #

在订阅API数据后，使用数组的filter方法剔除与当前页面用户ID相同的条目：

getCustomerSimilar() {
    const currentId = this.route.snapshot.paramMap.get('id')!; // 直接获取字符串ID，避免类型转换
    this.customerService.getCustomerSimilar(Number(currentId)).subscribe(
      data => {
        // 过滤掉ID与当前用户一致的条目
        this.similarClients = data.data.filter(client => client.id !== currentId);
      },
      error => {
        console.log('Error', error);
      });
  }

如果坚持使用数字类型比较，也可以统一转换类型后过滤：

const currentId = Number(this.route.snapshot.paramMap.get('id'));
// ...
this.similarClients = data.data.filter(client => Number(client.id) !== currentId);

3. 可选：使用自定义管道过滤（模板层处理） #

如果希望在模板中直接处理过滤逻辑，可以创建一个自定义管道：

3.1 创建管道文件

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'excludeCurrentUser' })
export class ExcludeCurrentUserPipe implements PipeTransform {
  transform(clients: Array<{id: string | number}>, currentId: string | number): Array<{id: string | number}> {
    // 统一类型后比较
    const targetId = String(currentId);
    return clients.filter(client => String(client.id) !== targetId);
  }
}

3.2 在组件中声明并使用

先在组件所在的模块中声明该管道，然后在组件中暴露当前ID：

// 组件.ts
currentId!: string;

ngOnInit() {
  this.currentId = this.route.snapshot.paramMap.get('id')!;
  this.getCustomerSimilar();
}

模板中使用管道：

<mat-list-item *ngFor="let podobna of similarClients | excludeCurrentUser: currentId" class="mat-list-item-focus" routerLink="/customers/{{podobna.id}}" role="navigation">
  <!-- 模板原有内容不变 -->
</mat-list-item>

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