Differenza tra [(ngModel)] e [ngModel] per l'associazione dello stato alla proprietà?

Ecco un esempio di modello:

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

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

Qui entrambi fanno la stessa cosa. Quale è il preferito e perché?

[(ngModel)]="overRideRate" è la forma abbreviata di [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"è legarsi overRideRateainput.value
• (ngModelChange)="overRideRate = $event"è quello di aggiornare overRideRatecon il valore di input.valuequando changeè stato emesso l' evento.

Insieme sono ciò che Angular2 fornisce per l'associazione a due vie.

[ngModel]="currentHero.name" è la sintassi per l'associazione unidirezionale, mentre,

[(ngModel)]="currentHero.name" è per l'associazione a due vie e la sintassi è composta da:

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

Se devi solo passare il modello, usa il primo. Se il tuo modello deve ascoltare gli eventi di modifica (ad esempio, quando il valore del campo di input cambia), usa il secondo.

È abbastanza semplice [] => da componente a modello () => da modello a componente [(ngModel)]è una forma contratta di[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

Maggiori dettagli qui: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

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:

1. Dal modello alla vista.
2. Dalla vista al modello.
3. 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 overRideRateproprietà 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:

1. Modello vincolante da visualizzare.
2. 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]valuta il codice e genera un output (senza associazione a due vie) .
[(ngModel)]valuta il codice e genera un output e abilita anche l'associazione a due vie .