并排动态添加 Angular 中元素的最佳方法

Question

我正在创建一个应用程序，它有一个 API 数组中 returns 个不同数量的对象，具体取决于我发送给他的变量。根据返回的对象数量，我想在一行中并排绘制多个圆圈，一行最多 10 个圆圈。每个返回的对象都包含有关圆圈颜色、ID、名称的信息。所以，如果 API returns 20 个对象我想画 20 个圆圈（2 行），用对象附带的适当颜色给它们上色，在 HTML 中为它们分配一个 ID 和一个姓名。根据从 API 返回的数组的大小，在 Angular 中动态添加元素的最佳方法是什么？

Answer 1

您可以使用模板注入：

<div *ngFor='let item of itemsArray' 
     [id]='item.id_key' 
     [ngStyle]="{'background-color': item.color}">
{{ item.name }}
</div>

或者您可以使用 renderer2 class，动态 createElement() 和 appendChild()。

两种方法都有效，这取决于个人喜好。