如何将一个值绑定到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中的文本框？

回答

相关问题