javascript - 在 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