Question

我一直在试图弄清楚如何将值绑定到Angular2中的文本框。目前我有一个带有占位符的文本框，该占位符加载了预定值。

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

但是一旦我更改了日期组件的值，我希望将占位符值更新为所选的日期值。到目前为止，我写了这个，但这似乎并没有起作用。请指教。

日期component.html

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

日期component.ts

Search

Answer 1

使用<input id="datepicker" (click)="changeLabel()"/> //<-- click event事件来传播更改。

<强>日期component.html

public File convert(File toConvert) { // TODO Auto-generated method stub String JsonString = "{\"value\": [{\"name\",\"kind\":\"url\":]}"; JSONParser file = new JSONParser(); Object obj = file; JSONObject jsonfile = (JSONObject) obj; //JSONObject from map interface String name = (String) jsonfile.get("name"); System.out.println(name); String kind = (String) jsonfile.get("kind"); System.out.println(kind); JSONArray url = (JSONArray) jsonfile.get("url"); //JSONArray from list interface Iterator<String> iterator = url.iterator(); while (iterator.hasNext()) { System.out.println(iterator.next()); } return toConvert ; }

Answer 2

您可以使用NgModel进行双向数据绑定。 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

基本上这会使＆＃34;标签＆＃34;改变为用户输入的内容。

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

您还需要在应用中导入FormsModule。 Plunker显示我的意思： https://plnkr.co/edit/CfmalT7GesrP5lzBsNFx?p=preview

Answer 3

使用keyup Event

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

输入其调用keyup事件的值

如何将值绑定到Angular2中的文本框？

3 个答案: