从离子输入中获取输入

Question

我不知道如何从 ion-input 和 console.log 获取输入。每次我这样做时，它总是在控制台中输出为undefined。有更好的方法吗？我是 Ionic 框架和 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种处理方式。

1. 带有[(ngModel)]的表单

2. 带有FormBuilder的表单

3. 带有Templates的表单

请阅读此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>