Angular ng用于迭代多个 HTML 项目

发布于 2025-01-13 15:09:51 字数 305 浏览 3 评论 0原文

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

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

How can I have ngFor 指令重复多个 HTML 项目？

谢谢

原文

I have a very simple Object (which I build from a JSON) and I want to display it as a description list. I would like to have the view of my Angular component like this:

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

How can I have the ngFor directive repeating more than one HTML item?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

装纯掩盖桑 2025-01-20 15:09:51

使用 KeyValuePipe：

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

也许还值得检查一下 < code>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>

Use the KeyValuePipe:

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

Maybe it is also worth to check if yourObject exists with some use of 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>

回复收藏 0 原文

~没有更多了~