如何编写Angular管道实现基于另一数组值的对象数组过滤功能

问题原因 #

• 原代码中users.id == args是把单个对象的id和整个条件数组做比对，逻辑错误，需要判断id是否属于条件数组的成员。
• 原代码未对参数类型做校验，传入非数组类型的过滤条件时会出现逻辑异常。

修改后的完整代码 #

export class ChatPipe implements PipeTransform {
  // 给参数加上明确类型，args指定为number数组
  transform(user: Users[], args: number[]): Users[] { 
    // 额外增加数组类型校验，避免传参错误导致报错
    if (!user || !args || !Array.isArray(args)) {
      return user;
    }
    // 用Array.includes判断当前对象的id是否在条件数组中
    return user.filter(users => args.includes(users.id));
  }
}

兼容说明 #

如果你的项目需要兼容IE浏览器，不支持includes方法，可以替换为以下写法实现同等效果：

return user.filter(users => args.indexOf(users.id) > -1);

按照你提供的测试数据，最终过滤结果会返回id为2的Proffesor对象和id为6的Denver对象。

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