Angular ng用于迭代多个 HTML 项目

Question

我有一个非常简单的对象（我从 JSON 构建），我想将其显示为描述列表。我希望我的 Angular 组件的视图如下所示：

<dl>
   <dt> key1 </dt>
   <dd> value1 </dd>
   <dt> key2 </dt>
   <dd> value2 </dd>
   ...
</dl>

如何让 ngFor 指令重复多个 HTML 项目？

谢谢

Answer 1

使用KeyValuePipe：

<dl>
  <ng-container *ngFor="let item of yourObject | keyvalue">
    <dt>{{item.key}}</dt>
    <dd>{{item.value}}</dd>
  </ng-container>
</dl>

也许还值得检查是否yourObject存在并使用以下命令NgIf：

<dl *ngIf="yourObject; else noObject">
  <ng-container *ngFor="let item of yourObject | keyvalue">
    <dt>{{item.key}}</dt>
    <dd>{{item.value}}</dd>
  </ng-container>
</dl>
<ng-template #noObject>
  No object.
</ng-template>