无法获得输入离子 3 的值答案

【问题标题】：Cant get value of input ionic 3无法获得输入离子 3 的值
【发布时间】：2018-03-11 16:00:17
【问题描述】：

我有简单的输入

<input type="number" maxlength=1 id="1"/>

和我的 .ts 文件中的简单 js

console.log(document.getElementById("1").value);

但我得到一个错误

Property 'value' does not exist on type 'HTMLElement'

【问题讨论】：

@MohamedAbbas 只是举例
错了，只能使用cordova，因为你不想使用Angular

标签： javascript html angular ionic3

【解决方案1】：

首先，您应该避免在 Angular 中直接访问 DOM，然后在 Ionic 中访问，这对性能不利，并且会降低您的代码可维护性。

而是将ngModel 添加到输入元素：

<ion-input [(ngModel)]="myInput"></ion-input>

并将实例变量添加到您的 .ts 文件中：

public myInput;

您的ngModel 变量将具有您输入字段的值。您可以通过例如将ionChange 事件侦听器添加到您的输入来记录对它的更改：

<ion-input [(ngModel)]="myInput" (ionInput)="logChange($event)"></ion-input>

然后在您的 .ts 文件中添加它的方法：

logChange(event) {
  console.log(event);
}

【讨论】：

我有 4 个输入，当我单击按钮时，我应该全部输入
然后你必须为每个人添加一个ngModel，然后点击你的按钮，你就可以使用你定义的变量。

【解决方案2】：

您需要转换为 HTMLInputElement (HtmlInputElement)。这是因为普通的 HTMLElements 没有 value 属性。

console.log(<HTMLInputElement>document.getElementById("1").value);

附：鉴于您使用的是 Ionic 3，我假设您也在使用 Angular，并且有更好的方法来获取 dom 元素，例如 ViewChild。

【讨论】：

在组件类中可以创建变量val :HTMLInputElement;，但可能需要导入HTMLInputElement类。

【解决方案3】：

由于您没有为value 属性提供输入number，因此您将获得未定义。

要么在元素中定义属性，要么在事件发生时提取它。

<input type="number" maxlength=1 id="1" />

<button onclick="bclick()">Click</button>

<script>

function bclick(){
  console.log(document.getElementById("1").value);
}
</script>

【讨论】：

我知道这段代码可以在浏览器中运行。但是在我的离子应用程序中它不起作用（。代码正在调用按钮提交。