Question

如果我使用括号，绑定就会从后端传到客户端。

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" [value]="name">
</div>

我想要完全相反，要么单向到后面，要么至少是双向束缚。我已经尝试了以下两种方法，但都没有将后面的变化传递给私人领域。

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" (change)="name">
</div>

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" [(change)]="name">
</div>

我错过了什么？

目的是让输入框为空（因此显示占位符的值），并且只要用户输入某些内容，就可以访问后面的值。

我想我可以使用标记并通过@viewChild引用组件。我也可以在(change)=updateName($event)上发起一个事件，但在我看来，这似乎有点hacky而不是最好的做法。

Answer 1

使用[(ngModel)]代替[(change)]

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" [(ngModel)]="name">
</div>

这提供了双向绑定。这意味着输入字段将显示name的值，但同时在用户在字段中输入时更新name。

在组件中初始化name='';，您将获得您的愿望。

如果您需要触发功能nameChanged()，请添加ngModelChange

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" [(ngModel)]="name" (ngModelChange)="nameChange()">
</div>

参考：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding（搜索ngModel）

Angular 2和从客户端到后端的单向绑定

1 个答案: