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

85

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é?

Pequeño dragón
fuente
7
[ngModel]- es solo propiedad vinculante, no bidireccional. Por lo tanto, ingresar un nuevo valor no se actualizará overRideRate.
VadimB
2
[(ngModel)] es un enlace bidireccional que proviene de Angular 2. [ngModel] es solo para mostrar.
David Doan
2
Alerta de obsolescencia: en Angular 6, ( angular.io/api/forms/FormControlName#use-with-ngmodel ) establece esto: El soporte para usar la propiedad de entrada ngModel y el evento ngModelChange con directivas de forma reactiva ha quedado obsoleto en Angular v6 y será eliminado en Angular v7. Ver también: ( stackoverflow.com/questions/50371079/… )
sboggs11
1
sboggs10 El enlace que proporcionó se refiere a la combinación de ngModel con formas reactivas, esto no está relacionado con la pregunta en casi los casos.
Cesar Leonardo Ochoa Contreras
Aquí hay una buena explicación acerca [(ngModel)], de dos vías de enlace de datos en Angular
Cateyes

Respuestas:

136

[(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.

Günter Zöchbauer
fuente
56

[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.

seidme
fuente
11

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).

Willem van der Veen
fuente
5

[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 .

Buzzzzzzz
fuente