Angular管道开发问题：按指定键数组筛选对象属性时值为undefined

问题根源分析 #

你的代码存在4个核心问题：

• omit函数无返回值：内部的Object.fromEntries语句没有用return返回，导致调用后始终得到undefined
• 筛选逻辑完全反向：当前逻辑是排除传入的keys，而你需要的是保留这些keys
• 返回格式不匹配模板需求：模板用*ngFor遍历，但你返回的是对象，Angular无法直接遍历对象，需要转成[key, value]格式的数组
• 模板中key/value展示颠倒：你把键和值的输出位置写反了

修正后的管道代码 #

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

@Pipe({
  name: 'filterProperties',
  standalone: true,
})
export class FilterPropertiesPipe implements PipeTransform {
  transform<T extends Record<string, any>, K extends keyof T>(
    object: T,
    keys: K[]
  ): [string, any][] {
    // 保留指定keys的键值对，转换为数组供*ngFor遍历
    return Object.entries(object).filter(([key]) => 
      keys.includes(key as K)
    );
  }
}

修正后的模板代码 #

<ng-container *ngFor="let keyValue of asset | filterProperties: arrayOfObjectKeys ; let i = index">  
  <div class="details-col">
    <span class="key">
     {{ keyValue.key }} :
    </span>
    <span class="value">
      {{ keyValue.value }}
    </span>
  </div>
</ng-container>

关键优化点说明 #

• 类型安全：通过泛型T和K extends keyof T确保传入的keys一定是目标对象的有效键
• 直接返回键值对数组：用Object.entries把对象转成数组，完美适配*ngFor遍历
• 简化逻辑：去掉冗余的omit函数，直接在transform中完成筛选，代码更清晰

支持深层对象的扩展方案 #

如果需要筛选深层对象的属性（比如user.address.city），可以扩展管道逻辑：

// 扩展版：支持深层路径
getDeepValue(obj: any, path: string): any {
  return path.split('.').reduce((current, key) => current?.[key], obj);
}

transform<T extends Record<string, any>>(
  object: T,
  paths: string[]
): [string, any][] {
  return paths.map(path => [
    path, 
    this.getDeepValue(object, path)
  ]).filter(([_, value]) => value !== undefined);
}

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