[(ngModel)] 和 [ngModel] 绑定状态到 属性 的区别？

Question

这是一个模板示例：

<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">

<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">

这里他们两个做同样的事情。首选哪一个？为什么？

Answer 1

[(ngModel)]="overRideRate" 是 [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

的缩写形式

• [ngModel]="overRideRate"是绑定overRideRate到input.value
• (ngModelChange)="overRideRate = $event" 是在发出 change 事件时用 input.value 的值更新 overRideRate。

它们一起就是 Angular2 提供的双向绑定。

Answer 2

很简单 [] => 组件到模板 () => 模板到组件 [(ngModel)] 是 [ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

的缩略形式

更多细节在这里： https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Answer 3

[ngModel]="currentHero.name" 是单向绑定的语法，而

[(ngModel)]="currentHero.name" 用于双向绑定，语法复合自：

[ngModel]="currentHero.name" 和 (ngModelChange)="currentHero.name = $event"

如果只需要传递模型，就用第一个。如果您的模型需要监听更改事件（例如，当输入字段值更改时），请使用第二个。

Answer 4

Angular2+数据流：

在Angular中，数据可以按以下方式在模型（组件class ts.file）和视图（组件的html）之间流动：

1. 从模型到视图。
2. 从视图到模型。
3. 数据双向流动，也称为双向数据绑定。

语法：

要查看的型号：

<input type="text" [ngModel]="overRideRate">

此语法也称为 属性 绑定。现在，如果输入字段的 overRideRate 属性 更改，视图将自动更新。但是，如果视图在用户输入数字时更新，则 overRideRate 属性 将不会更新。

查看模型：

(input)="change($event)"            // calling a method called change from the component class
(input)="overRideRate=$event.target.value" // on input save the new value in the title property

这里发生的是事件被触发（在本例中是输入事件，但可以是任何事件）。然后我们可以调用组件的方法 class 或直接将 属性 保存在 class 属性.

2 向数据绑定：

<input [(ngModel)]="overRideRate" type="text" >

以下语法用于双向数据绑定。它基本上是两者的语法糖：

1. 绑定模型以查看。
2. 将视图绑定到模型

现在我们的 class 内部发生了一些变化，这将反映我们的视图（模型到视图），只要用户更改输入，模型就会更新（视图到模型）。

Answer 5

[ngModel] 计算代码并生成输出 （无双向绑定）。
[(ngModel)] 评估代码并生成输出 并且还启用双向绑定。