如何點擊角2

Question

我面臨的問題在角2和離子，我是新角2，在這個代碼我試圖點擊併發送表單值給控制器，我不能發送表單值，請檢查我的代碼和幫助， 在此先感謝

<ion-grid> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Name" ng-model="Name"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Mobile" ng-model="Mobile"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Key" ng-model="Key"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block (click)="CreateUser(range,Name,Mobile,Key)">Login</button> 

      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block>Signup</button> 

      </ion-col> 
     </ion-row> 

    </ion-grid> 

，這是我的角2碼，

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

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

    constructor(public navCtrl: NavController) { 

    } 
    CreateUser(Name,Mobile,Key){ 
    alert(Name); 
    } 

} 

Answer 1

首先，在角2，您需要使用該指令ngModel，而不是ng-model。其次，你需要一個雙向數據綁定，所以把它包裝在'香蕉盒語法'[()]中。第三，對於您在模板中使用的每個模型，您需要組件中的一個字段。以下是更新後的代碼：

<ion-grid> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Name" [(ngModel)]="Name"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Mobile" [(ngModel)]="Mobile"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Key" [(ngModel)]="Key"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block (click)="CreateUser()">Login</button> 

      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block>Signup</button> 

      </ion-col> 
     </ion-row> 

    </ion-grid> 

JS：

所有你需要改變 ng-model到 [(ngModel)]在你的代碼，如果你想兩者的屬性和事件結合的

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

@Component({ 
    selector: 'page-form', 
    templateUrl: 'form.html' 
}) 
export class FormPage { 
    Name: string; 
    Mobile: string; 
    Key: string; 

    constructor(public navCtrl: NavController) { 

    } 

    CreateUser(){ 
     alert(this.Name); 
    } 

} 

Answer 2

第一。

然後在你的HTML您致電CreateUser功能類似下面

<button ion-button block (click)="CreateUser(range,Name,Mobile,Key)">Login</button> 

但在組件類，實際上只接受3個參數，如看到下面

CreateUser(Name,Mobile,Key){ 
alert(Name); 
} 

，所以你不能撥打電話到CreateUser。 理想的代碼應該是像下面

<ion-grid> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Name" [(ngModel)]="Name"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Mobile" [(ngModel)]="Mobile"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Key" [(ngModel)]="Key"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block (click)="CreateUser()">Login</button> 

      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block>Signup</button> 

      </ion-col> 
     </ion-row> 

    </ion-grid> 

，然後在你的組件類

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

@Component({ 
    selector: 'page-form', 
    templateUrl: 'form.html' 
}) 
export class FormPage { 
    public Name:string; 
    public Mobile:string; 
    public Key:string; 

    constructor(public navCtrl: NavController) { 

    } 
    CreateUser():void{ 
     alert(this.Name+" "+this.Mobile+" "+this.Key+" user created"); 
    } 
} 

但是你必須添加以下的進口在你的組件使用ngModel

import { FormsModule } from '@angular/forms';

Answer 3

在你的代碼中使用模板表格

實現在app.module.ts

然後insted的ngModel的模板形式進口FormModule使用[（ngModel）]

<ion-grid> 
      <ion-row> 
       <ion-col> 
        <ion-item > 
         <ion-input placeholder="Name" [(ngModel)]="user.Name"></ion-input> 
        </ion-item> 
       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col> 
        <ion-item > 
         <ion-input placeholder="Mobile" [(ngModel)]="user.Mobile"></ion-input> 
        </ion-item> 
       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col> 
        <ion-item > 
         <ion-input placeholder="Key" [(ngModel)]="user.Key"></ion-input> 
        </ion-item> 
       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col > 
        <button ion-button block (click)="CreateUser()">Login</button> 

       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col > 
        <button ion-button block>Signup</button> 

       </ion-col> 
      </ion-row> 

     </ion-grid> 

.TS

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

@Component({ 
    selector: 'page-form', 
    templateUrl: 'form.html' 
}) 
export class FormPage { 
user:any={}; 
    constructor(public navCtrl: NavController) { 

    } 
    CreateUser(){ 
    console.log(this.user) 
    } 

}