イオン入力からの入力を取得する

Question

イオン入力からどのように入力し、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() 
 
    } 
 

 
}

あらかじめありがとう！

Answer 1

まず、イオンフォームを扱う方法を知っています。それを扱うには3つの方法があります。 Templates

とFormBuilder

フォームで[(ngModel)]

フォームで

1. フォーム深く、それを学ぶために、このofficial docをお読みください。

   あなたの上記の例では、上記の方法のいずれかを実行していません。それがうまくいかない理由です。

Answer 2

これを試すことができます。この場合

TS

..... 

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>