如何创建具有动态ID的div单击角度为6/7的按钮

Question

在角度6中，我需要单击一个按钮来创建div。每次创建的新div应该在容器内具有不同的id。这是下面的代码

app.html

<button (click)="creatediv()">Create div</button>
<div  class="container">
 <div id="div1">Newly div created</div>
<div  id="div2">Newly div created</div>
</div>

app.ts

creatediv() {

  }

Answer 1

您可以在组件.ts中使用数组，并在模板中对其进行迭代：

模板：

<button (click)="createDiv()">Create div</button>
<div class="container">
  <div *ngFor="let div of divs" id="div{{div}}">Newly div created</div>
</div>

组件：

export class DivsComponent {
  divs: number[] = [];

  createDiv(): void {
    this.divs.push(this.divs.length);
  }
}

对于相反的顺序，您可以将createDiv方法更改为此：

createDiv(): void {
  this.divs.unshift(this.divs.length);
}