Question

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

在组件html文件中：

ngOnInit() {
    this.route.paramMap.pipe(
      switchMap((params: ParamMap) =>
        of(params.get('postName'))
      )
    ).subscribe((d) => {
      this.postName = d;
      this.postInit();
    });

  }

  async postInit() {
    const file = await fetch(`/_posts/${this.postName}.md`);
    const text = await file.text();
    const content = text.trim();
    this.parseFrontMatter(content);
  }

  parseFrontMatter(content: string) {
    const frontMatter: Post = matter.loadFront(content);
    this.title = frontMatter.title;
    this.author = frontMatter.author;
    this.created = frontMatter.created;
    this.markdown = frontMatter.__content;
    this.loading = false;
  }

在组件ts文件中：

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

我习惯使用javascript / jQuery来克隆元素，但很难找到最好的方法来完全实现我想在Angular中完成的工作。克隆是正确的方法吗？

Answer 1

您可以使用*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
          });
     }
}

第一个教程的 first 章节中的文档对此进行了介绍。

https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor

Angular 6 - 如何在打字稿中克隆/复制div？

1 个答案: