如何設置值輸入字段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); 
} 

我的控制檯告訴我，這個數字得到了改變。但更新的值不會顯示在我的輸入字段中。你有什麼建議嗎？

在此先感謝！

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中更改它，它會立即更新「在代碼中」。當您在代碼中更新它時，它會在用戶界面中自動更新。

您應該先閱讀Angular 2教程，然後再繼續使用您的應用。 Angular提供了許多工具來使這種事情變得更容易。