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?
angular
angular-ngmodel
Mały smok
źródło
źródło
[ngModel]
- jest to tylko wiązanie własności, a nie wiązanie dwukierunkowe. Zatem wprowadzenie nowej wartości nie zaktualizuje sięoverRideRate
.[(ngModel)]
, Dwukierunkowa Wiązanie danych w kątowymOdpowiedzi:
[(ngModel)]="overRideRate"
to krótka forma[ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"
[ngModel]="overRideRate"
jest powiązanieoverRideRate
zinput.value
(ngModelChange)="overRideRate = $event"
to aktualizacjaoverRideRate
o wartośćinput.value
czasuchange
emisji zdarzenia.Razem są tym, co Angular2 zapewnia dwukierunkowe wiązanie.
źródło
[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.
źródło
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
źródło
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:
Składnia:
model do obejrzenia:
Ta składnia jest również nazywana powiązaniem właściwości . Teraz, jeśli
overRideRate
wł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:
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:
Poniższa składnia jest używana do dwukierunkowego wiązania danych. Jest to w zasadzie cukier syntaktyczny dla obu:
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).
źródło
[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 .źródło