如何设置值输入字段离子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);
}

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

提前致谢!

L. 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提供了许多工具来使这类事情变得更容易.