嵌套对象场景下JSON值无法显示问题咨询（附Angular代码）

嘿，我明白你现在遇到的麻烦了——当数据源是嵌套JSON结构时，表格里的内容没法正常渲染出来对吧？结合你给出的代码片段，我来给你具体的解决方案：

核心问题分析 #

你的_mData应该是一个包含嵌套对象的数组（比如{ parent: { child: 'value' } }这种结构），而模板里如果直接尝试访问非顶层属性，或者你的自定义管道（比如tdwSearchfilter、orderBy）不支持解析嵌套路径，就会导致值无法正常显示甚至报错。

解决方案1：模板中正确访问嵌套属性 #

如果你的数据是类似这样的嵌套结构：

// 示例嵌套数据
_mData = [
  { 
    id: 1, 
    userInfo: { name: "Syed Akmal", department: "Dev" } 
  },
  { 
    id: 2, 
    userInfo: { name: "Jane Smith", department: "Design" } 
  }
];

那在模板里需要明确遍历到嵌套层级，同时用**安全导航操作符（?.）**避免空值报错：

<tbody class="mat-color--white tdw-card-thin tdw-border-2">
  <tr class="tdw-hover-up-thin" *ngFor="let item of _mData | tdwSearchfilter: _mSearchField: _mSearchQuery | orderBy: order:reverse:'case-insensitive'; let iRow=index">
    <!-- 复选框部分保持不变 -->
    <th *ngIf="_mIsCheckable" class="tdw--text-align-right sort-remove">
      <mat-checkbox [(ngModel)]="_mIsCheckedList[iRow]" ></mat-checkbox>
    </th>
    <!-- 正确访问嵌套属性的示例 -->
    <th class="tdw-bottom-line-light tdw-padding-v-16 tdw-font-14 tdw-font-open-sans">
      {{ item?.userInfo?.name }}
    </th>
    <th class="tdw-bottom-line-light tdw-padding-v-16 tdw-font-14 tdw-font-open-sans">
      {{ item?.userInfo?.department }}
    </th>
  </tr>
</tbody>

解决方案2：让自定义管道支持嵌套属性 #

如果你的tdwSearchfilter或orderBy管道无法处理嵌套路径（比如你想按userInfo.name排序/过滤），需要修改管道逻辑来解析嵌套路径：

以orderBy管道为例，修改后的核心逻辑如下：

transform(array: any[], sortPath: string, reverse: boolean, caseInsensitive: boolean): any[] {
  if (!Array.isArray(array) || !sortPath) return array;

  // 解析嵌套属性路径的工具函数
  const getNestedValue = (obj: any, path: string) => {
    return path.split('.').reduce((currentVal, key) => currentVal?.[key], obj);
  };

  return array.sort((a, b) => {
    let valA = getNestedValue(a, sortPath);
    let valB = getNestedValue(b, sortPath);

    // 处理大小写不敏感的情况
    if (caseInsensitive && typeof valA === 'string') {
      valA = valA.toLowerCase();
      valB = valB.toLowerCase();
    }

    return reverse ? (valA < valB ? 1 : -1) : (valA > valB ? 1 : -1);
  });
}

现在你就可以直接传入嵌套路径作为排序字段了：

*ngFor="let item of _mData | orderBy: 'userInfo.name':reverse:'case-insensitive'"

额外提示 #

• 先确认你的_mData数据结构是否正确，可以在组件里用console.log(_mData)打印出来检查
• 如果嵌套层级很深，也可以考虑在组件里预先把需要展示的属性提取成顶层字段，简化模板逻辑

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