使用Angular和Ionic，如何在点击按钮时将元素添加到DOM上
问题描述：
我正在使用Ionic和Angular开发应用程序，并希望用户根据需要添加输入字段。所有教程我在这个题目看都采用了棱角分明的1.x，我采用了棱角分明4.使用Angular和Ionic，如何在点击按钮时将元素添加到DOM上
下面是HTML：
<ion-content>
<ion-row id="row" ng-repeat= "emailinput of emailinputs">
<ion-col col-3 id="label">
Email
</ion-col>
<ion-col col-8 id="emailcol">
<input type="email" id="email" placeholder="[email protected]" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinput">
</ion-col>
</ion-row>
<div padding>
<button (click) = "addnewemail(emailinput)" id="register" ion-button full color="nudgetprim" block>Add</button>
<button (click) = "sendinvite(emailVal)" id="register" ion-button full color="nudgetprim" block>Invite</button>
</div>
</ion-content>
打字稿的按钮：
addnewemail(emailinput) {
console.log(emailinput)
var emailinputs = [];
var newItem = emailinputs.length+1;
emailinputs.push({'id' : 'row' + newItem, 'name' : 'row' + newItem});
}
答
这就是它应该看起来像是如果我正在解释你想要的东西。您的id和nameemailinput的属性不需要在那里，除非您在其他地方有一些用途。
<ion-content>
<ion-item id="row" *ngFor="let emailinput of emailinputs ; let i = index">
<ion-label>
Email
</ion-label>
<ion-input type="email" id="email{{i}}" placeholder="[email protected]" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinput.email"></ion-input>
</ion-item>
<div padding>
<button (click) = "addnewemail()" id="register" ion-button full color="nudgetprim" block>Add</button>
<button (click) = "sendinvite(emailVal)" id="sendinvite" ion-button full color="nudgetprim" block>Invite</button>
</div>
</ion-content>
emailinputs = [{'id' : 'row0', 'name' : 'row0', 'email': ''}];
...
constructor(...
...
addnewemail() {
let newItem = this.emailinputs.length;
this.emailinputs.push({'id' : 'row' + newItem, 'name' : 'row' + newItem, 'email': ''});
}
。 'ng-repeat is angular 1' ....'* ngFor =“让emailinputs的emailinput”'。你也不想在每次调用函数的时候声明'emailinputs = []'你正在清空以前添加的所有内容......'emailinputs'应该在页面的范围内，所以你可以使用'* ngFor'' – ewizard
。 ..im现在也意识到你需要在你的emailinput对象中提供这个类型，所以你可以用'type ='和'id ='....来使用它，你会希望标签改变，所以你可以把{{emailinput .name}}在那里。 – ewizard