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

我的控制台告诉我，号码变了。但是更新后的值不会显示在我的输入字段中。你有什么建议吗？

提前致谢!

大号。颤音

Answer 1

你可以这样做:

页面.html

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

页面.ts

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

  constructor() {}

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

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

在继续开发您的应用程序之前，您可能应该阅读 Angular 2 教程。 Angular 提供了许多工具来使这类事情变得容易得多。