Javascript Angular 6-如何在typescript中克隆/复制div？

我正在从事一个项目，该项目涉及提供有关车辆部件的信息。每个组件都有一组描述性字段。我有一个“添加另一个组件”按钮，需要创建一个具有相同字段的相同div容器。克隆的父div当然需要不同的ID。例如：

在组件html文件中：

<div id="component-outer">
    <div class="component-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="clone()">Add Another Component</div>

---

我习惯于使用javascript/jQuery来克隆元素，但很难找到实现我在Angular中的目标的最佳方法。克隆是正确的方法吗？

您可以使用

*ngFor

为数组中的每个项创建DOM元素

<div id="component-outer">
    <div *ngFor="let item of items" class="component-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="append()">Add Another Component</div>

export class AppComponent {
     public items: any[];

     public append() {
          this.items.push({
              // values depend on what an item is
          });
     }
}

组件内容。。。。
添加另一个组件
导出类AppComponent{
公共物品：任何[]；
公共附加（）{
这个。项目。推({
//值取决于项目是什么
});
}
}

本教程第一章中的文档介绍了这一点

---

您应该在模型中克隆一个项目，并将HTML绑定到列表中。您不应该在Angular应用程序中直接操作DOM。

<div id="component-outer">
    <div *ngFor="let item of items" class="component-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="append()">Add Another Component</div>

export class AppComponent {
     public items: any[];

     public append() {
          this.items.push({
              // values depend on what an item is
          });
     }
}