如何设置值输入字段离子2

Question

我有一个小问题。

我正在使用此HTML代码：

<ion-input id="amount" type="number" ></ion-input>

<button (click)="setinput()">Set Value</button>

这个TS代码：

setinput(){
var input= document.getElementById("amount") as HTMLInputElement;
input.value=42;
console.log("amount");
console.log(input.value);
}

我的控制台告诉我，这个数字已经改变了。但更新后的值不会显示在我的输入字段中。你有什么建议吗？

提前致谢！

升。 Trembon

Answer 1

你可以这样做：

page.html中

<ion-input id="amount" type="number" [(ngModel)]="value"></ion-input>
<button (click)="setInput()">Set Value</button>

page.ts

export class Page {
  value: number = 0; // Default is 0

  constructor() {}

  setInput() {
    this.value = 42;
  }
}

使用[(ngModel)]="value"将value变量绑定到该输入字段。这样它总是更新。如果您在UI中更改它，它会立即“在代码中”更新。当您在代码中更新它时，它会自动在UI中更新。

在继续处理应用程序之前，您应该阅读Angular 2教程。 Angular提供了许多工具来使这类事情变得更加容易。