使用Angular和Ionic，如何在单击按钮时将元素添加到DOM [英] Using Angular and Ionic, how can I add elements to the DOM on a button click

问题描述

我正在使用Ionic和Angular开发应用程序，希望用户根据需要添加输入字段.我在该主题上看到的所有教程都使用Angular 1.x，而我使用的是Angular 4.

I'm working on an app using Ionic and Angular and would like the user to add input fields as they need. All tutorials I see on this topic are using Angular 1.x and I'm using Angular 4.

这是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="[e-mail]" (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 和 name 属性，否则它们就不需要存在.

This is what it should look like if I am interpreting what you want correctly. Your id and name attributes of an emailinput don't need to be there unless you have some use for them somewhere else.

<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="[e-mail]" (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': ''});
}

这篇关于使用Angular和Ionic，如何在单击按钮时将元素添加到DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！