如何根据动态字段名获取嵌套数组值并绑定至Div？

你当前的代码只遍历了数据的顶层键，没法解析options[0].ch_message这种包含数组索引的嵌套路径，所以得先把路径字符串拆成可识别的节点，再逐层访问数据。

1. 实现通用取值工具函数 #

写一个能解析带数组索引路径的函数，放在组件里：

getNestedValue(obj: any, path: string): any {
  // 把路径里的[0]格式转为.0，再按.分割成路径片段
  const pathSegments = path.replace(/\[(\d+)\]/g, '.$1').split('.');
  // 逐层遍历路径片段，获取对应值
  return pathSegments.reduce((current, segment) => {
    if (current == null) return undefined;
    return current[segment];
  }, obj);
}

2. 修改组件逻辑获取值 #

替换你原来的筛选逻辑，用上面的函数直接取值：

displayValue: any;
fieldName: string;

ngOnInit(): void {
  // 假设这里从resultData拿到目标字段路径（如"ch_Id"或"options[0].ch_message"）
  this.fieldName = resultData['fieldName'];
  // 调用工具函数获取对应值
  this.displayValue = this.getNestedValue(this.data, this.fieldName);
  console.log('displayValue', this.displayValue);
}

3. 绑定到Div #

在Angular模板里直接用插值表达式绑定即可：

<div>{{ displayValue }}</div>

这个函数能同时处理两种场景：

• 顶层字段（如ch_Id）：直接返回data.ch_Id的值
• 嵌套数组路径（如options[0].ch_message）：自动解析为data.options[0].ch_message并返回对应值

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