Flusso di dati Angular2 +:
In Angular i dati possono fluire tra il modello (componente classe ts.file) e la visualizzazione (html del componente) nei seguenti modi:
- Dal modello alla vista.
- Dalla vista al modello.
- I dati fluiscono in entrambe le direzioni, noto anche come associazione dati a 2 vie .
Sintassi:
modello da visualizzare:
<input type="text" [ngModel]="overRideRate">
Questa sintassi è nota anche come associazione di proprietà . Ora se la overRideRate
proprietà del campo di input cambia, la vista verrà automaticamente aggiornata. Tuttavia, se la vista si aggiorna quando l'utente inserisce un numero, la overRideRate
proprietà non verrà aggiornata.
visualizza per modellare:
(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
Quello che succede qui è che viene attivato un evento (in questo caso evento di input, ma potrebbe essere qualsiasi evento). Possiamo quindi chiamare i metodi della classe del componente o salvare direttamente la proprietà in una proprietà della classe.
Associazione dati a 2 vie:
<input [(ngModel)]="overRideRate" type="text" >
La sintassi seguente viene utilizzata per l'associazione dati a 2 vie. È fondamentalmente uno zucchero sintattico per entrambi:
- Modello vincolante da visualizzare.
- Vista vincolante al modello
Ora qualcosa cambia all'interno della nostra classe, questo rifletterà la nostra vista (da modello a vista), e ogni volta che l'utente cambia l'input il modello verrà aggiornato (da vista a modello).
[ngModel]
- è solo associazione di proprietà, non a due vie. Quindi l'immissione di un nuovo valore non verrà aggiornatooverRideRate
.