Question

的后续行动

重新配置HTML后，我现在不得不将ngmodel（特别是emailinputs.email）传递给函数sendinvite()。

新的HTML是：

<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" placeholder="jdoe@gmail.com" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinputs[i].email"></ion-input>
  </ion-item>

  <div padding>
    <button (click) = "addnewemail()" id="register" ion-button full color="nudgetprim" block>Add</button>
    <button (click) = "sendinvite(emailinput.email)" id="sendinvite" ion-button full color="nudgetprim" block>Invite</button>
  </div>

</ion-content>

该函数的Typescript是：

export class InvitePage {

    emailinputs = [{'id' : 'row0', 'name' : 'row0', 'email': ''}];

        sendinvite(emailinputs.email) {
      if (this.emailinputs.email==null || this.emailinputs.email=="" || !this.emailinputs.email.includes("@") || !this.emailinputs.email.includes("."))
        {
          let alert = this.alerCtrl.create({
                title: 'Error!',
                message: 'There was an error with an email address you entered.',
                buttons: ['Ok']
              });
              alert.present()
            }
      else {
      this.emailComposer.isAvailable().then((available: boolean) =>{
       if(available) {
       }
      });

      let email = {
        to: this.emailinputs.email,
        attachments: [],
        subject: 'Nudget Invite',
        body: '<a href="">Join my grocery list!</a>',
        isHtml: true
      };

      this.emailComposer.open(email);        }
    }
}

使用emailinputs.email会导致错误，我不确定原因。

Answer 1

我已根据您的要求更新了以下代码。 Please find the working version here

TS文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  emailinputs = [{'id' : 'row0', 'name' : 'row0', 'email': 'prithiviraj199@gmail.com'},
  {'id' : 'row1', 'name' : 'row1', 'email': 'prithiviraj1991@gmail.com'}];
  emailNames : any=[];


  constructor(public navCtrl: NavController) {

  }

  sendinvite(){
    this.emailinputs.map((email)=>{
      this.emailNames.push(email.email);
    });
    alert(this.emailNames);
  }

  addnewemail() {
    this.emailinputs.push({'id' : 'row0', 'name' : 'row0', 'email': 'malliga@gmail.com'});
}

}

HTML文件

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>


   <ion-row id="row" *ngFor= "let emailinput of emailinputs">
      <ion-col col-3 id="label">
        Email
      </ion-col>
      <ion-col col-8 id="emailcol">
        <input type="email" id="email" placeholder="jdoe@gmail.com" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinput.email">
      </ion-col>
    </ion-row>

    <div padding>
    <button (click) = "addnewemail()" id="register1" ion-button full color="nudgetprim" block>Add</button>
    <button (click) = "sendinvite()" id="register" ion-button full color="nudgetprim" block>Invite</button>
  </div>
</ion-content>

使用Angular，如何将ngmodel传递给函数？

1 个答案: