Angular自定义Unique管道无法正常工作，请求技术排查

咱们先拆解你的代码可能存在的问题，再给出针对性的解决办法：

1. 核心问题：对象数组场景下的比较逻辑失效 #

你的管道里用array.indexOf(el) == index判断唯一性，但这个方法是按内存引用比较的。如果你的value是对象数组（比如[{id:1}, {id:1}]），哪怕两个对象的属性完全一致，只要它们的内存地址不同，indexOf就会判定为不同元素，直接导致去重逻辑失效。

2. 边界情况未处理 #

如果传入的value是null、undefined或者非数组类型，filter方法会直接抛出错误，导致管道崩溃。

解决办法 #

方法一：升级管道，支持基本类型+对象数组去重 #

修改pipe.ts代码，增加属性指定逻辑，同时处理边界情况：

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

@Pipe({
  name: 'unique',
  pure: false // 若数据源是可变数组（比如直接push/remove元素），需设为false；若每次更新都返回新数组，可设为true提升性能
})
export class UniquePipe implements PipeTransform {
  transform(value: any[], uniqueProp?: string): any[] {
    // 边界处理：非数组或空数组直接返回空
    if (!Array.isArray(value)) return [];

    if (!uniqueProp) {
      // 针对字符串、数字等基本类型数组去重，用Set更高效
      return Array.from(new Set(value));
    } else {
      // 针对对象数组，按指定属性去重
      const seenValues = new Set();
      return value.filter(item => {
        const propVal = item[uniqueProp];
        if (!seenValues.has(propVal)) {
          seenValues.add(propVal);
          return true;
        }
        return false;
      });
    }
  }
}

方法二：模板中对应使用方式 #

假设你的dealOP是对象数组，要按id属性去重，模板里这么写：

<li *ngFor="let dealOP of dealList | unique:'id'">
  <!-- 你的列表内容 -->
</li>

如果是基本类型数组（比如字符串/数字数组），直接使用即可：

<li *ngFor="let item of basicArray | unique">
  <!-- 你的列表内容 -->
</li>

额外必做检查 #

别忘了在你的模块（NgModule）的declarations数组中声明这个管道！很多人会遗漏这一步，导致模板识别不出管道：

@NgModule({
  declarations: [
    // ...其他组件、指令
    UniquePipe
  ]
})
export class YourFeatureModule { }

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