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:
- Do modelo à vista.
- Da vista ao modelo.
- 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 overRideRate
propriedade 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:
- Modelo de encadernação para visualizar.
- 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]
- é apenas uma associação de propriedade, não uma associação bidirecional. Portanto, inserir um novo valor não será atualizadooverRideRate
.