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

Posted 2023-02-22

【中文标题】[(ngModel)] 和 [ngModel] 将状态绑定到属性的区别？

【英文标题】：Difference between [(ngModel)] and [ngModel] for binding state to property?

【发布时间】：2017-07-19 04:44:50

【问题描述】：

这是一个模板示例：

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

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

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

【问题讨论】：

[ngModel] - 它只是属性绑定，不是双向绑定。所以输入新值不会更新overRideRate。

[(ngModel)] 是来自 Angular 2 的双向绑定。[ngModel] 只是为了显示。

弃用警告：在 Angular 6 中，(angular.io/api/forms/FormControlName#use-with-ngmodel) 声明如下：Angular v6 中已不推荐使用带有反应形式指令的 ngModel 输入属性和 ngModelChange 事件，并将被删除在 Angular v7 中。 另请参阅：(***.com/questions/50371079/…)

sboggs10 您提供的链接是指将ngModel与反应形式结合起来，这几乎与问题无关。

这里有一个关于[(ngModel)]、Two-way Data Binding in Angular的很好的解释

【参考方案1】：

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

【参考方案2】：

Angular2+ 数据流：

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

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

语法：

要查看的模型：

<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

这里发生的是触发了一个事件（在这种情况下是输入事件，但可以是任何事件）。然后我们可以调用组件类的方法或直接将属性保存在类属性中。

双向数据绑定：

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

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

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

现在我们的类内部发生了一些变化，这将反映我们的视图（模型到视图），并且每当用户更改输入时，模型都会更新（视图到模型）。

【参考方案3】：

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

[(ngModel)]="currentHero.name" 用于双向绑定，语法是compound from：

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

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

【参考方案4】：

这很简单 [] => 组件到模板 () => 模板到组件 [(ngModel)] 是 [ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event"> 的缩略形式

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

【参考方案5】：

[(ngModel)]="overRideRate" 是[ngModel]="overRideRate" (ngModelChange)="overRideRate = $event" 的简写形式

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

它们共同构成了 Angular2 为双向绑定提供的功能。