Różnica między [(ngModel)] a [ngModel] dla powiązania stanu z właściwością?

Oto przykład szablonu:

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

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

Tutaj obaj robią to samo. Który jest preferowany i dlaczego?

[(ngModel)]="overRideRate" to krótka forma [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"jest powiązanie overRideRatezinput.value
• (ngModelChange)="overRideRate = $event"to aktualizacja overRideRateo wartość input.valueczasu changeemisji zdarzenia.

Razem są tym, co Angular2 zapewnia dwukierunkowe wiązanie.

[ngModel]="currentHero.name" jest składnią jednokierunkowego wiązania, podczas gdy,

[(ngModel)]="currentHero.name" służy do wiązania dwukierunkowego, a składnia jest złożona z:

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

Jeśli potrzebujesz tylko przekazać model, użyj pierwszego. Jeśli twój model musi nasłuchiwać zdarzeń zmian (np. Gdy zmienia się wartość pola wejściowego), użyj drugiego.

To całkiem proste [] => komponent do szablonu () => szablon do komponentu [(ngModel)]to zakontraktowana forma[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

Więcej szczegółów tutaj: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Angular2 + przepływ danych:

W Angular dane mogą przepływać pomiędzy modelem (klasa komponentu ts.file) a widokiem (html komponentu) w następujący sposób:

1. Od modelu do widoku.
2. Od widoku do modelu.
3. Dane przepływają w obu kierunkach, nazywane również dwukierunkowym wiązaniem danych .

Składnia:

model do obejrzenia:

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

Ta składnia jest również nazywana powiązaniem właściwości . Teraz, jeśli overRideRatewłaściwość pola wejściowego zmieni się, widok zostanie automatycznie zaktualizowany. Jeśli jednak widok zostanie zaktualizowany, gdy użytkownik wprowadzi liczbę, overRideRate właściwość nie zostanie zaktualizowana.

widok do modelu:

(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

To, co się tutaj dzieje, to wyzwalanie zdarzenia (w tym przypadku zdarzenie wejściowe, ale może to być dowolne zdarzenie). Następnie możemy wywołać metody klasy komponentów lub bezpośrednio zapisać tę właściwość we właściwości klasy.

Dwukierunkowe wiązanie danych:

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

Poniższa składnia jest używana do dwukierunkowego wiązania danych. Jest to w zasadzie cukier syntaktyczny dla obu:

1. Powiązanie modelu do wyświetlenia.
2. Powiązanie widoku z modelem

Teraz coś się zmienia w naszej klasie, co będzie odzwierciedlać nasz widok (model do widoku), a gdy użytkownik zmieni dane wejściowe, model zostanie zaktualizowany (widok na model).

[ngModel]ocenia kod i generuje dane wyjściowe (bez dwukierunkowego wiązania) .
[(ngModel)]ocenia kod i generuje dane wyjściowe, a także włącza dwukierunkowe wiązanie .