値の設定方法入力フィールドイオン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

あなたはそのようにそれを行うことができます。

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

    constructor() {} 

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

が[(ngModel)]="value"を使用することにより、あなたがvalue変数をバインド

page.html

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

page.tsその入力フィールドに入力します。そうすれば、それは常に更新されます。 UIでそれを変更すると、すぐに「コード内で」更新されます。コードで更新すると、自動的にUIで更新されます。

アプリで作業を続ける前に、角度2のチュートリアルを読んでください。 Angularは、そのようなことをもっと簡単にするための多くのツールを提供します。