Angular管道如何基于colorIds数组过滤ItemModel类型的数组？

实现方案 #

逻辑说明 #

核心判断逻辑：

• 若res.colorIds为空/未定义，直接返回所有商品
• 否则保留item.colorIds与res.colorIds存在交集的商品（即商品包含任意一个选中颜色就展示）

1. 原生JS实现

transform(items: ItemModel[]): Observable<ItemModel[]> {
  return this.menuElementsDataService.filterMenuFinalDataChanged$.pipe(
    map((res: FilterMenuDataModel) => {
      if (!res) {
        return items;
      }
      // 无选中颜色时返回全部商品
      const selectedColorIds = res.colorIds || [];
      if (selectedColorIds.length === 0) {
        return items;
      }
      // 原生方法判断两个数组是否有交集
      return items.filter(item => {
        const itemColorIds = item.colorIds || [];
        return itemColorIds.some(colorId => selectedColorIds.includes(colorId));
      });
    })
  );
}

2. Lodash实现

transform(items: ItemModel[]): Observable<ItemModel[]> {
  return this.menuElementsDataService.filterMenuFinalDataChanged$.pipe(
    map((res: FilterMenuDataModel) => {
      if (!res) {
        return items;
      }
      const selectedColorIds = res.colorIds || [];
      if (selectedColorIds.length === 0) {
        return items;
      }
      // 用Lodash的交集方法判断更简洁
      return _.filter(items, (item) => 
        _.intersection(item.colorIds || [], selectedColorIds).length > 0
      );
    })
  );
}

补充：如果你的需求是商品必须包含全部选中颜色才展示，把上述交集长度判断改为_.intersection(xxx).length === selectedColorIds.length即可。

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