Diferença entre [(ngModel)] e [ngModel] para vincular o estado à propriedade?

Aqui está um exemplo de modelo:

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

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

Aqui, os dois fazem a mesma coisa. Qual é o preferido e por quê?

[(ngModel)]="overRideRate" é a forma abreviada de [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"é ligar overRideRate- se aoinput.value
• (ngModelChange)="overRideRate = $event"é atualizar overRideRatecom o valor de input.valuequando o changeevento foi emitido.

Juntos, eles são o que o Angular2 fornece para ligação bidirecional.

[ngModel]="currentHero.name" é a sintaxe para vinculação unilateral, enquanto,

[(ngModel)]="currentHero.name" é para ligação bidirecional, e a sintaxe é composta de:

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

Se você só precisa passar de modelo, use o primeiro. Se o seu modelo precisa ouvir eventos de mudança (por exemplo, quando o valor do campo de entrada muda), use o segundo.

É bastante simples [] => componente para modelo () => modelo para componente [(ngModel)]é uma forma contratada de[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

Mais detalhes aqui: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Fluxo de dados Angular2 +:

No Angular, os dados podem fluir entre o modelo (classe de componente ts.file) e a visualização (html do componente) das seguintes maneiras:

1. Do modelo à vista.
2. Da vista ao modelo.
3. Os dados fluem em ambas as direções, também conhecido como vinculação de dados bidirecional .

Sintaxe:

modelo para visualizar:

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

Essa sintaxe também é conhecida como associação de propriedade . Agora, se a overRideRatepropriedade do campo de entrada mudar, a visualização será atualizada automaticamente. No entanto, se a visualização for atualizada quando o usuário inserir um número, a overRideRate propriedade não será atualizada.

vista para o 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

O que acontece aqui é que um evento é disparado (neste caso, evento de entrada, mas pode ser qualquer evento). Podemos então chamar métodos da classe do componente ou salvar diretamente a propriedade em uma propriedade de classe.

Ligação de dados bidirecional:

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

A sintaxe a seguir é usada para vinculação de dados bidirecional. É basicamente um açúcar sintático para ambos:

1. Modelo de encadernação para visualizar.
2. Vinculando a vista ao modelo

Agora, algo muda dentro de nossa classe, isso refletirá nossa visão (modelo para visão), e sempre que o usuário alterar a entrada, o modelo será atualizado (visão para modelo).

[ngModel]avalia o código e gera uma saída (sem ligação bidirecional) .
[(ngModel)]avalia o código e gera uma saída e também permite a associação bidirecional .