Question

我不知道如何从离子输入和console.log输出输入。每次我这样做，它总是在控制台中输出为undefined。有没有更好的方法呢？我是Ionic Framework和Angular的完全新手。

这是我的代码：

src/pages/addtask/addtask.html

＆＃13;

<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>

＆＃13;

src/pages/addtask/addtask.ts

＆＃13;

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

＆＃13;

提前致谢！

Answer 1

您首先知道如何处理离子形式。有3种方法可以处理它。

包含beautiful.notification_icon_size
包含[(ngModel)]
包含FormBuilder

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

从Ionic中的离子输入获取输入

2 个答案: