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

Posted 2023-03-05

【中文标题】如何在离子中获取输入文本值

【英文标题】：How to get input text value in ionic

【发布时间】：2018-06-23 12:00:33

【问题描述】：

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

这是我的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>

这是我在 ionic 中的 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;
  
  

【参考方案1】：

在 Ionic 5 中 - 聚焦时获取离子输入值的方法：

<ion-input (ionFocus)="onFocusPlace($event)"></ion-input>

onFocusPlace(event)
    this.value = event.target.value;

【讨论】：

嗨，欢迎来到 SO！请在回答问题时留下一些描述，不要简单地提供一些代码（例如为什么你的代码有效，OP代码的问题是什么）。

【参考方案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，

about ngModel

如果您需要访问输入的值，请检查 inputValue 的值。

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

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

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

【参考方案3】：

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

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

在组件内部，

name:string;

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

console.log(this.name);

【讨论】：

我试过这个。但是这个ng-model 也适用于较新的版本吗？

新版本是什么意思？

以及如何在需要时获取ng-model 值？

这是我得到的错误：[ts] Argument of type ' selector: string;模板网址：字符串；名称：字符串； ' 不可分配给“组件”类型的参数。对象字面量只能指定已知属性，而“组件”类型中不存在“名称”。

您是否重新启动了应用程序？