使用Angular 2+在Button单击上添加DOM元素 [英] Add DOM element on Button click with Angular 2+
问题描述
我正在学习如何使用Angular 2+操作DOM,并且我想在触发click事件时添加类型为email的Input字段.我在Google上进行了一些研究,但在Angular2 +中找不到解决方案.
Hi I'm learning how to manipulate the DOM with Angular 2+ and I want to add an Input field with type email when the click event is triggered. I've researched a bit with google, but couldn't find a soluion with 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" />
如何在已经存在的字段下生成额外的inpult字段?我要使用什么工具?
How can I generate extra inpult fields under the already existing one? What are my tools to use?
addInputEmail(){
}
在每个按钮上单击都会生成一个新的输入字段.我有点绝望,因为我首先不知道要使用什么工具".
On each button click a new input field should be generated. Im kinda hopeless because I don't know what 'Tools' I have to manipulate it in the first place.
谢谢.
推荐答案
类似的方法应该起作用-
Something like this should work --
<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)
}
}
希望这是有道理的.
您正在基于电子邮件数组构建输入元素.然后在按钮上按,您将添加到在模板中创建新输入的数组.
You are building the input elements based on the array of emails. And on the button press you add to the array which creates a new input in the template.
这篇关于使用Angular 2+在Button单击上添加DOM元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!