¿Diferencia entre [(ngModel)] y [ngModel] para vincular el estado a la propiedad?

Aquí hay un ejemplo de plantilla:

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

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

Aquí ambos hacen lo mismo. ¿Cuál se prefiere y por qué?

[(ngModel)]="overRideRate" es la forma corta de [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"es unir overRideRatea lainput.value
• (ngModelChange)="overRideRate = $event"es actualizar overRideRatecon el valor de input.valuecuándo changese emitió el evento.

Juntos son lo que Angular2 proporciona para el enlace bidireccional.

[ngModel]="currentHero.name" es la sintaxis para el enlace unidireccional, mientras que,

[(ngModel)]="currentHero.name" es para enlace bidireccional, y la sintaxis se compone de:

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

Si solo necesita aprobar modelo, use el primero. Si su modelo necesita escuchar eventos de cambio (por ejemplo, cuando cambia el valor del campo de entrada), use el segundo.

Es bastante simple [] => componente a plantilla () => plantilla a componente [(ngModel)]es una forma contratada de[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

Más detalles aquí: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Flujo de datos Angular2 +:

En Angular, los datos pueden fluir entre el modelo (clase de componente ts.file) y la vista (html del componente) de la siguiente manera:

1. Del modelo a la vista.
2. De la vista al modelo.
3. Los datos fluyen en ambas direcciones, también conocido como enlace de datos bidireccional .

Sintaxis:

modelo para ver:

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

Esta sintaxis también se conoce como enlace de propiedad . Ahora, si la overRideRatepropiedad del campo de entrada cambia, la vista se actualizará automáticamente. Sin embargo, si la vista se actualiza cuando el usuario ingresa un número, la overRideRate propiedad no se actualizará.

vista al modelo:

(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

Lo que sucede aquí es que se activa un evento (en este caso, evento de entrada, pero podría ser cualquier evento). Luego podemos llamar a métodos de la clase de componente o guardar directamente la propiedad en una propiedad de clase.

Enlace de datos bidireccional:

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

La siguiente sintaxis se utiliza para el enlace de datos bidireccional. Básicamente es un azúcar sintáctico para ambos:

1. Modelo de encuadernación para ver.
2. Enlace de vista a modelo

Ahora algo cambia dentro de nuestra clase, esto reflejará nuestra vista (modelo a vista), y cada vez que el usuario cambie la entrada, el modelo se actualizará (vista a modelo).

[ngModel]evalúa el código y genera una salida (sin enlace bidireccional) .
[(ngModel)]evalúa el código y genera una salida y también habilita el enlace bidireccional .