使用 Angular 2+ 在按钮单击上添加 DOM 元素

Question

嗨，我正在学习如何使用 Angular 2+ 操作 DOM，我想在触发点击事件时添加一个类型为 email 的输入字段。我用谷歌研究了一下，但找不到 Angular2+ 的解决方案。

<form>
<fieldset>
  <legend>
    <span class="number">3</span>E-Mail Receipants</legend>
  <input type="email" name="email1" placeholder="E-Mail Recipients john.doe@mail.com">
  <input type="button" value="Add E-Mail" (click)="addInputEmail()">
</fieldset>
<input type="submit" value="Generate Template" />

如何在现有字段下生成额外的输入字段？我可以使用哪些工具？

addInputEmail(){
}

在每个按钮上单击一个新的输入字段应该生成。我有点绝望，因为我不知道我必须首先操纵什么“工具”。

谢谢。

Answer 1

像这样的事情应该有效-

 <div *ngFor='let email of emails'>
   <input type="email" [attr.name]="email" >
 </div>
 <input type="button" value="Add E-Mail" (click)="addInputEmail()">

——

export class formComponent {
  emails = ["email1"];
  emailNumber = 1;
  constructor () {

  }

  addInputEmail() {
    this.emailNumber++; 
    this.emails.push("email"+this.emailNumber)
  }
}

希望这是有道理的。

您正在根据电子邮件数组构建输入元素。然后按下按钮，添加到在模板中创建新输入的数组中。