动态渲染模型的属性 - Angular答案

【问题标题】：render Model's properties dynamically - Angular动态渲染模型的属性 - Angular
【发布时间】：2021-10-14 04:59:41
【问题描述】：

我有一个来自后端的模型，它有很多属性，例如：

item:{
Name,
Quantity,
Price,
...
}

我正在 html 中呈现该模型的属性，例如：

<p>{{item.Name}}</p>
<p>{{item.Quantity}}</p>

但如果将新属性添加到模型中，我必须将其添加到代码中。我需要一种方法来迭代模型的属性而不用硬编码方式编写它们

【问题讨论】：

【解决方案1】：

您可以使用 Object.entries() 方法遍历对象的属性

Object.entries(item)

上述方法将返回属性列表。在您的 html 中将其与 ngFor 一起使用

【讨论】：

【解决方案2】：

试试这样的：

<p *ngFor="let key of Object.keys(item)">
{{ item[key] }}
</p>

【讨论】：

【解决方案3】：

您可以在 HTML 模板中使用 *ngfor 指令

ngFor 是 angular 的内置指令。使用 ngFor 很容易迭代对象、数组等。你可以认为ngFor和JS中的for循环或者foreach循环是一样的。

示例：

<p *ngFor="let eachItem of item;>
{{ eachItem }}
</p>

更新

您可以使用角度构建 KeyValuePipe 将对象和映射转换为键值对数组。 Check Docs

我实现了一个小例子检查StackBlitz Example

【讨论】：