如何让Angular将字符串解析为嵌套字典取值调用？

你遇到的核心问题是Angular模板不会执行字符串形式的表达式，所以直接输出element?.custom_info?.enrichment?.deviceNames这类字符串无法拿到实际值。下面是三种实用的解决办法：

方法一：自定义取值管道（推荐，复用性强） #

创建一个可复用的管道，专门处理从嵌套对象中按路径取值的需求：

1. 生成管道文件：

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

@Pipe({ name: 'getValue' })
export class GetValuePipe implements PipeTransform {
  transform(targetObj: any, path: string): any {
    // 空值防御
    if (!targetObj || !path) return null;
    
    // 清理路径中的可选链符号，拆分键名
    const cleanPath = path.replace(/\?\./g, '.');
    const keys = cleanPath.split('.');
    
    // 移除开头的"element"前缀（如果路径包含它）
    const targetKeys = keys[0] === 'element' ? keys.slice(1) : keys;
    
    // 递归遍历取值，保留可选链逻辑
    return targetKeys.reduce((current, key) => current?.[key], targetObj);
  }
}

2. 在模块中声明该管道，然后在模板中使用：

<!-- 假设element是当前行的数据对象，dictParser(column)返回路径字符串 -->
{{ element | getValue: dictParser(column) }}

方法二：组件内写取值方法 #

如果仅当前组件使用，直接在组件类中写取值方法更便捷：

// 组件.ts文件中
getNestedValue(obj: any, path: string): any {
  if (!obj || !path) return null;
  
  const cleanPath = path.replace(/\?\./g, '.');
  const keys = cleanPath.split('.');
  const targetKeys = keys[0] === 'element' ? keys.slice(1) : keys;
  
  return targetKeys.reduce((acc, key) => acc?.[key], obj);
}

模板中调用：

{{ getNestedValue(element, dictParser(column)) }}

方法三：修改dictParser直接返回值 #

如果dictParser原本就是用来生成取值路径的，不如直接让它返回最终值，省去字符串解析步骤：

// 修改后的dictParser，接收element和column参数
dictParser(element: any, column: any): any {
  // 替换成你原来生成路径的逻辑，直接转为取值操作
  // 示例：根据column配置动态取嵌套值
  switch(column.key) {
    case 'deviceNames':
      return element?.custom_info?.enrichment?.deviceNames;
    // 其他列的取值逻辑
    default:
      return null;
  }
}

模板中直接调用：

{{ dictParser(element, column) }}

三种方法都能解决问题，优先推荐管道方案，因为它可在整个项目中复用，符合Angular组件化思想。

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