在 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

堆栈闪电战示例