使用HTML和Typescript打印出键/值对

Question

我在Typescript中有一个键/值对对象：

myFields: { [key: string]: string } = {};

我正在尝试创建一个网格，在每个键的值旁边列出每个键，例如

name: John
lastname: Smith
age: 40

我知道如何制作网格，但是我不确定如何获取每个键的名称和值。

    <div *ngIf="myFields" class="fields-grid-container">
        <div *ngFor="let field of myFields" class="fields-grid-item">
            {{field}}
        </div>
    </div>

这是我目前拥有的东西，但什么也没有显示。在html中打印键/值对数组的正确方法是什么？创建一个字符串数组并将每个字符串元素构建为键+值并改用它更好吗？

Answer 1

您可以使用管道KeyValuePipe

<div *ngFor="let item of someObject | keyvalue">
  {{item.key}}: {{item.value}}
</div>

Stackblitz示例：https://stackblitz.com/edit/angular-2xs6zn?file=src/app/app.component.html