Angular 中对象的渲染对象

Question

我如何在 Angular 中呈现一个对象的对象，但不将其转换为数组或类似的东西。这样做的原因是我有一个很大的对象对象，我想避免从对象到数组的多次迭代，以便在 html.

中循环数组

例如我有：

    persons: any = {
      0: { name: 'name1', email: 'name1@gmail.com' },
      1: { name: 'name2', email: 'name2@gmail.com' },
      2: { name: 'name3', email: 'name3@gmail.com' }
    }

当我执行以下操作时：

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

结果是：

    0 / [object Object]
    1 / [object Object]
    2 / [object Object]

我试图通过person.value再循环一次：

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

但这会导致错误（“没有重载匹配此调用。”）。

谁能告诉我如何实现这一点？

Answer 1

您可以只使用 json 管道

示例：

{{persons | json}}

文档：https://angular.io/api/common/JsonPipe

Stackblitz example

Answer 2

keyvalue 管道将 0: { name: 'name1', email: 'name1@gmail.com' } 转换为 { key : 0, value : { name: 'name1', email: 'name1@gmail.com' }}。所以你应该能够做到：

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

Angular 中对象的渲染对象

Render object of objects in Angular

javascript

render

object

ngfor

angular