2017-11-19 14 views
0

これは、HTMLを再構成した後this question.Angularを使用すると、どのようにngmodelを関数に渡すことができますか?

のフォローアップで、私は今、機能sendinvite()に、具体的emailinputs.email、ngmodelを渡すことで立ち往生しています。

新しいHTMLは次のとおりです。エラーがemailinputs.email結果を使用して

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

と私はなぜわからない:関数の

<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="[email protected]" (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> 

活字体です。

+0

this.emailinputsあなたはブークレ私は謝罪 – Fetrarij

答えて

0

私は以下のコードを要件に合わせて更新しました。 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': '[email protected]'}, 
    {'id' : 'row1', 'name' : 'row1', 'email': '[email protected]'}]; 
    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': '[email protected]'}); 
} 

} 

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="[email protected]" (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> 
+0

でアクセスすることができ、配列です。 ngmodelは '' emailinputs.email ''ではなく '" emailinputs [i] .email "'であるはずです。 '[i]'を削除すると、各フィールドの入力が同じになります。 – cfoster5

+0

ああ私はあなたの編集で私の答えをチェックします –

+0

コードは正しいbefore.its emailInput.emailはemailInputs.emailではありませんので、別の電子メールが届きます –

関連する問題