從離子輸入中獲取輸入離子輸入

我不知道如何從離子輸入得到輸入，並且console.log出來。每次我做到這一點，它總是在控制檯中輸出爲undefined。有沒有更好的方法來做到這一點？我是Ionic Framework和Angular的全新新手。從離子輸入中獲取輸入離子輸入

這裏是我的代碼：

src/pages/addtask/addtask.html

<ion-header> 
 
    <ion-navbar primary> 
 
    <ion-title> 
 
     Add Task 
 
    </ion-title> 
 

 
    </ion-navbar> 
 
</ion-header> 
 

 
<ion-content> 
 

 
    <ion-list> 
 

 
    <ion-item> 
 
     <ion-label floating> Task </ion-label> 
 
     <!-- Get Input from below --> 
 
     <ion-input type="text" [(ngModel)]="task" id="task"></ion-input> 
 
    </ion-item> 
 

 
    <ion-item> 
 
     <ion-label>Priority</ion-label> 
 
     <ion-select [(ngModel)]="priority" id="pri"> 
 
     <ion-option value="High">High</ion-option> 
 
     <ion-option value="Normal">Normal</ion-option> 
 
     <ion-option value="Low">Low</ion-option> 
 
     </ion-select> 
 
    </ion-item> 
 

 
    <div padding> 
 
     <button ion-button color="greed" full round (click)="post()">Save</button> 
 
    </div> 
 

 

 
    </ion-list> 
 

 
</ion-content>

src/pages/addtask/addtask.ts

import { Component } from '@angular/core'; 
 
import { NavController, IonicPage, NavParams } from 'ionic-angular'; 
 
import { HomePage } from '../home/home'; 
 
import { Storage } from '@ionic/storage' 
 

 

 
@Component({ 
 
    selector: 'page-task', 
 
    templateUrl: 'addtask.html' 
 
}) 
 

 
export class AddTask { 
 

 
    // post() outputs undefined undefined in the console 
 

 
    post(){ 
 
    let tasksValue = (document.getElementById('task') as HTMLInputElement).value; 
 
    let priVal = (document.getElementById('pri') as HTMLInputElement).value; 
 
    console.log(tasksValue, priVal); 
 
    } 
 

 
    constructor(public navCtrl: NavController, private storage: Storage) { 
 

 
    } 
 

 
    close(){ 
 
    this.navCtrl.pop() 
 
    } 
 

 
}

預先感謝！

來源

2017-08-06 Abhishta Gatya

您首先知道如何處理離子形式。有三種處理方式。

形式與[(ngModel)]
形式與FormBuilder
形式與Templates

請了深刻學習它閱讀本official doc。

在你上面的例子中，你沒有遵循上述任何一種方法。那是它不起作用的原因。

來源

2017-08-06 06:00:14 Sampath

，你會建議我用它來獲得輸入？ –

我想推薦'Forms with FormBuilder'方法，這種方法也被稱爲反應形式方法。但是您也可以使用'[with（（ngModel）]'方法。它是一些古老的AngularJS方法。 – Sampath

如果您對這些方法有任何疑問，請告訴我。 – Sampath

你可以試試這個。

..... 

export class AddTask { 

//first declare variable for your input. 
task:any; 
pri:any; 

post(){ 
    console.log('task',this.task); 
    console.log('pri',this.pri) 
    } 
}

HTML

<ion-item> 
     <ion-label floating> Task </ion-label> 
     <ion-input type="text" [(ngModel)]="task"></ion-input> 
    </ion-item> 

    <ion-item> 
     <ion-label>Priority</ion-label> 
     <ion-select [(ngModel)]="pri"> 
     <ion-option value="High">High</ion-option> 
     <ion-option value="Normal">Normal</ion-option> 
     <ion-option value="Low">Low</ion-option> 
     </ion-select> 
    </ion-item> 

    <div padding> 
     <button ion-button full (click)="post()">Save</button> 
    </div>

在這種情況下

來源

2017-08-06 09:45:45

謝謝你的解決方案:) –

從離子輸入中獲取輸入離子輸入

回答

相關問題