Question

在开发Angular应用程序时，要实现2向绑定，相对于以下3种方法（也在下面列出），使用[[ngModel）]方法（如下所示）有什么好处。另外，在其中。双向数据绑定（构建表单还是一般（非表单）用例场景）的最佳选择是什么？

[（ngModel）]方法：

<input [(ngModel)]="varName">

<--OR-->

<input [ngModel]="varName" (ngModelChange)="SomeFunction($event.target.value)">

1。输入/事件绑定如下：

<input [value]="aVar" (input)="aVar=$event.target.value" >
    {{aVar}}

2。模板变量如下：

    <input [value]="bVar" (input)="bVar=ipx.value" #ipx>
{{bVar}}

3。香蕉语法方法：

 <input ([value])="cVar">
{{cVar}}

Answer 1

1。 NgModel

<!-- Will not work should replace with below No One -->
<input [ngModel]="varName" (ngModelChange)="SomeFunction($event.target.value)">

<!-- One -->
<input [ngModel]="varName" (ngModelChange)="varName = $event">

2。属性绑定

<input [value]="aVar" (input)="aVar=$event.target.value" >

3。 #ipx 用作元素引用，它将为您提供元素引用。

第4种香蕉语语法方法：<input ([value])="cVar">不起作用。因为value不是一个角度指令，而ngModel是一个指令，它属于FormsModule。`

NgModel是对各种元素和组件的抽象。
template reference (#ipx)仅适用于具有value属性并发出更改事件的输入元素。
[value]="aVar"是属性绑定。我们用表达式名称绑定输入元素的value属性。（输入）=“表达式”是事件绑定。每当输入事件被触发时，都会执行表达式。
[(ngModel)]="varName"是[ngModel]="varName" (ngModelChange)="varName = $event"
使用NgModel指令，该指令将允许您将DOM输入元素和自定义组件集成到Angular表单功能中。

结论：

我们可以得出结论，指令ngModel只是属性绑定和事件绑定的组合。
Event binding is denoted using small bracket和property binding is denoted using square [] bracket，如果您发现syntax of ngModel is [(ngModel)], which is like a banana放在框中，则表明这是事件绑定和属性绑定的组合。

引用Stackblitz

使用ngModel优于输入/事件绑定，模板变量绑定和使用banana语法的优点-2向绑定的方法

1 个答案: