如何將一個值綁定到Angular2中的文本框？

我一直在想出如何將一個值綁定到Angular2中的文本框。目前我有一個帶有預定值的佔位符的文本框。如何將一個值綁定到Angular2中的文本框？

<input id="textbox" class="k-textbox" placeholder={{label}} />

但是，一旦我更改日期組件的價值，我想佔位符值進行更新，以選定的日期值。到目前爲止，我寫了這個，但這似乎並沒有工作。請指教。

日期component.html

<input id="datepicker" (input)="changeLabel()"/>

日期component.ts

label:string; 
constructor() { 
    this.label = 'Select Date'; 
} 
changeLabel() { 
    this.label = 'Date Selected'; 
    } 
}

來源

2016-09-26 Mitchell Y

你嘗試：<輸入ID = 「文本框」類=「K -textbox「[placeholder] =」label「/> – galvan

@galvan是的，我做到了。但是，即使選擇日期組件後也沒有任何反應。 –

使用click事件傳播的變化。

日期component.html

<input id="datepicker" (click)="changeLabel()"/> //<-- click event

來源

2016-09-26 10:42:40 candidJ

謝謝你的回覆。現在它做了以下改變。 <輸入的ID = 「文本框」類= 「K-文本框」[佔位符] = 「標籤」/> <輸入的ID = 「日期選擇器」（點擊）= 「changeLabel（）」/> 後我只點擊文本框內的日期改變。有沒有辦法讓它在選擇日期後更新文本框，而不是在文本框內單擊？沿着'onchange'線？ –

'placeholder = {{label}}'和'[placeholder] =「label」'正在做同樣的事情 - INTERPOLATION。您可以使用屬性綁定值。 – candidJ

你可以使用雙向綁定與NgModel。 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

基本上這會使「標籤」更改爲任何用戶類型。

<input [(ngModel)]="label" id="datepicker" />

您還需要在應用中導入FormsModule。 Plunker來說明我的意思： https://plnkr.co/edit/CfmalT7GesrP5lzBsNFx?p=preview

來源

2016-09-26 10:49:25 m4ttsson

利用keyUp事件

<input (keyup)="changeLabel()">

輸入值的調用keyup事件

來源

2016-09-26 11:19:21 Murali

如何將一個值綁定到Angular2中的文本框？

回答

相關問題