如何在离子中获取输入文本值

Question

我正在尝试获取 input 文本值并将其存储在名为 input 的变量中 ionic 中。但我尝试过但失败了。谁能告诉我我做错了什么？

这是我的 HTML

   <ion-content>
  <ion-list>
    <ion-item>
        <ion-label stacked>display</ion-label>
      <ion-input type="text" text-right id="input" ></ion-input>
    </ion-item>
  </ion-list>
  </ion-content>

这是我的 home.ts 离子

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

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

  constructor(public navCtrl: NavController) {
    var input=document.getElementById('input').nodeValue;
    document.getElementById('seven').innerHTML=input;
  }

}

原文由 Jananath Banuka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

实际上你似乎在使用 angular 而不是 angularjs，使用 [(ngModel)]

  <ion-input type="text" [(ngModel)]="name" text-right id="input" ></ion-input>

在组件内部，

name:string;

所以只要你需要这个值，你就可以使用。

console.log(this.name);

原文由 Sajeetharan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label stacked>display</ion-label>
      <ion-input type="text" text-right id="input" [(ngModel)]="inputValue"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

// ===

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    inputValue: string = "";
    constructor(public navCtrl: NavController) {}

    someFunction() {
        // here you can use the 'this.inputValue' and get the value of the ion-input
    }

}

我们使用两种方式将 ion-input 的值与类成员 inputValue 绑定，

关于 ngModel

当您需要访问输入的值时，请检查 inputValue 的值。

在这里你可以看到我在 StackBlitz 上写的一个例子

双向绑定 是属性绑定和事件绑定的组合，因为它是数据/值从表示层到组件以及从组件到表示层的连续同步。

由于这是双向绑定，我们必须同时使用方括号 - [ ( ) ]。 ngModel 也是一个指令，用于双向绑定数据。

原文由 Ofir G 发布，翻译遵循 CC BY-SA 3.0 许可协议