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

标签 angular typescript dom

嗨,我正在学习如何使用 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(){
}

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

谢谢。

最佳答案

像这样的事情应该有效-

 <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)
  }
}

希望这是有道理的。

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

关于angular - 使用 Angular 2+ 在按钮单击上添加 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48666254/

相关文章:

JavaScript DOM XSS 注入(inject)验证

javascript - 实现 MutationObserver 代替 DOMSubtreeModified

typescript - Angular2 + typescript + jspm : No provider for Http ( App -> Provider -> Http )

javascript - 将鼠标悬停在所有列表项上,指定项除外

angular - 如何更改 Angular Material 日期选择器格式

typescript - 使用类型作为具有约束的泛型的别名

javascript - 如何使用内联 onclick 属性停止事件传播?

angular - 找不到模块 'webpack' - Angular

javascript - 使用 Writefile Api (Ionic-Cordova) 创建 JPEG 文件后无法打开

angular - 如何在不干扰/覆盖 Angular Material 设计的情况下以 Angular 使用引导网格样式