Angular *ngFor配合keyvalue管道仅显示根级键值 子数据显示为Object如何修复

核心问题原因 #

Angular 内置的 keyvalue 管道仅对传入对象做浅键值提取，不会自动递归解析嵌套的对象、数组结构。直接通过模板插值渲染引用类型的值时，JS 会默认调用对象的 toString() 方法，最终输出 [object Object]，无法展示嵌套内部的实际内容。
另外原模板写法存在一个小问题：把 *ngFor 写在 <ul> 标签上，会导致每循环一次就生成一个独立的 <ul> 元素，DOM 结构语义不合理，实际使用时应该把循环逻辑放在内部的 <li> 或者 <ng-container> 上，这点可以在修复时顺手优化。

具体修复方式 #

1. 浅嵌套场景：二次遍历处理嵌套值 #

对于嵌套层级不深的场景，不需要写自定义管道，只需要在模板里判断当前值的类型，对非原始类型的值再做一次 keyvalue 遍历即可。
首先在组件类里加一个类型判断方法：

// 判断传入值是否为字符串、数字、布尔、null、undefined这类原始类型
isPrimitive(value: unknown): boolean {
  return value !== Object(value);
}

对应的修正后模板代码：

<ul class="list-group">
  <!-- 遍历根对象的第一层键值 -->
  <ng-container *ngFor="let item of data | keyvalue">
    <li class="list-group-item">
      {{ item.key }}:
      <!-- 原始类型直接渲染 -->
      <ng-container *ngIf="isPrimitive(item.value); else nestedContent">
        {{ item.value }}
      </ng-container>
      <!-- 非原始类型（对象/数组）走内嵌渲染逻辑 -->
      <ng-template #nestedContent>
        <ul class="list-group mt-2">
          <li class="list-group-item" *ngFor="let nested of item.value | keyvalue">
            {{ nested.key }}: {{ nested.value }}
          </li>
        </ul>
      </ng-template>
    </li>
  </ng-container>
</ul>

这个方案的优点是零额外依赖，只需要少量代码就能覆盖两层以内的嵌套结构；因为keyvalue管道本身支持对数组做遍历（会把数组索引作为键名），示例中的extra数组可以直接被二次遍历正常渲染，不需要额外做类型兼容。

2. 深嵌套场景：自定义递归键值管道 #

如果数据的嵌套层级不确定、比较深，写多层嵌套的模板会非常冗余，可以自定义一个带递归逻辑的键值管道，自动处理任意深度的嵌套结构：

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

@Pipe({ name: 'deepKeyvalue' })
export class DeepKeyvaluePipe implements PipeTransform {
  transform(value: any): { key: string; value: any; isLeaf: boolean }[] {
    // 遇到原始类型直接标记为叶子节点，停止递归
    if (value !== Object(value)) {
      return [{ key: '', value, isLeaf: true }];
    }
    // 转成可遍历的键值结构
    return Object.entries(value).map(([key, val]) => ({
      key,
      value: val,
      isLeaf: val !== Object(val)
    }));
  }
}

模板里只需要写一套通用的渲染逻辑，不管嵌套多少层都能正确展示，不需要重复写判断代码。

3. 临时调试场景：JSON 管道快速转义 #

如果只是临时排查数据结构，不需要做正式的页面展示，可以直接用Angular内置的json管道把对象值转成字符串渲染，不需要写额外的遍历逻辑：

<li class="list-group-item">{{ item.key }}: {{ item.value | json }}</li>

注意：这个方案输出的是带大括号、引号的原始JSON格式，可读性差，仅适合临时调试，不建议在正式生产页面中使用。

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