Question

我有简单的输入

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

和.ts文件中的简单js

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

但我收到错误

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

Answer 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);
}

Answer 2

您需要转换为HTMLInputElement（HtmlInputElement）。这是因为常规的HTMLElements没有值属性。

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

P.S。鉴于你正在使用Ionic 3我假设你也在使用Angular，并且有更好的方法来获取ViewChild等dom元素。

Answer 3

由于您没有为value输入number属性，因此未定义。

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

＆＃13;

<input type="number" maxlength=1 id="1" />

<button onclick="bclick()">Click</button>

<script>

function bclick(){
  console.log(document.getElementById("1").value);
}
</script>

＆＃13;

无法获得输入离子3的值

3 个答案: