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

85

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?

Mały smok
źródło
7
[ngModel]- jest to tylko wiązanie własności, a nie wiązanie dwukierunkowe. Zatem wprowadzenie nowej wartości nie zaktualizuje się overRideRate.
VadimB
2
[(ngModel)] to dwukierunkowe wiązanie pochodzące z Angular 2. [ngModel] służy tylko do pokazania się.
David Doan
2
Alert o wycofaniu : w Angular 6 ( angular.io/api/forms/FormControlName#use-with-ngmodel ) stwierdza to: Obsługa używania właściwości wejściowej ngModel i zdarzenia ngModelChange z dyrektywami formularza reaktywnego jest przestarzała w Angular v6 i będzie usunięte w Angular v7. Zobacz także: ( stackoverflow.com/questions/50371079/… )
sboggs11
1
sboggs10 Odnośnik, który podałeś, odnosi się do połączenia ngModel z formami reaktywnymi, w większości przypadków nie jest to związane z pytaniem.
Cesar Leonardo Ochoa Contreras
Tutaj jest dobrym wyjaśnieniem o [(ngModel)], Dwukierunkowa Wiązanie danych w kątowym
cateyes

Odpowiedzi:

136

[(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.

Günter Zöchbauer
źródło
56

[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.

seidme
źródło
11

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).

Willem van der Veen
źródło
5

[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 .

Buzzzzzzz
źródło