如何在Ionic 2中设置值输入字段

Question

9

我有一个小问题。

我正在使用这段HTML代码：

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

而且这是TS代码：

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

我的控制台告诉我，这个数字已经更改。但是更新后的值没有显示在我的输入字段中。你有任何建议吗？

提前感谢！

L. Trembon

- Luca Trembon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andreas Gassmann · Accepted Answer

你可以这样做：

page.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变量绑定到输入字段上。这样它就会始终更新。如果您在UI中更改它，它会立即在代码中更新。当您在代码中更新它时，它会自动更新UI。

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