如何在Angular中无需转数组直接渲染嵌套对象结构

错误原因 #

你遇到的No overload matches this call报错是TypeScript类型校验导致的：keyvalue管道仅支持传入Map类型或者明确的Record键值对类型，你将persons声明为any类型时，TS无法推断person.value是可被keyvalue管道处理的合法输入，因此抛出类型不匹配错误。

最低损耗实现方案（适配你的性能需求） #

因为你需要避免不必要的迭代损耗，若内层对象的属性结构固定（比如示例中固定为name、email两个字段），不需要额外加第二层keyvalue循环，直接访问属性即可，性能最优：

<div *ngFor="let person of persons | keyvalue">
  <p>
    {{ person.key }} / {{ person.value.name }} / {{ person.value.email }}
  </p>
</div>

内层属性不固定需动态遍历的解决方案 #

如果内层对象的属性是动态的、必须遍历获取，可以用以下两种方法解决报错：

方法1：明确声明数据类型（推荐） #

在TS文件中为persons定义明确的类型，替代any声明，从根源解决类型校验问题：

persons: Record<number, Record<string, string>> = {
  0: { name: 'name1', email: 'name1@gmail.com' },
  1: { name: 'name2', email: 'name2@gmail.com' },
  2: { name: 'name3', email: 'name3@gmail.com' }
};

模板可直接正常使用双层keyvalue循环：

<div *ngFor="let person of persons | keyvalue;">
  <p>
    {{ person.key }}
    <span *ngFor="let item of person.value | keyvalue">
      {{ item.key }}: {{ item.value }}
    </span>
  </p>
</div>

方法2：模板内临时类型断言 #

如果不想修改TS侧的类型声明，可以在模板中使用$any()方法临时绕过TypeScript类型检查：

<div *ngFor="let person of persons | keyvalue;">
  <p>
    {{ person.key }}
    <span *ngFor="let item of $any(person.value) | keyvalue">
      {{ item.key }}: {{ item.value }}
    </span>
  </p>
</div>

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