Hier ist ein Vorlagenbeispiel:
<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">
<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">
Hier machen beide dasselbe. Welches wird bevorzugt und warum?
angular
angular-ngmodel
Kleiner Drache
quelle
quelle
[ngModel]
- Es ist nur eine Eigenschaftsbindung, keine Zwei-Wege-Bindung. Die Eingabe eines neuen Werts wird also nicht aktualisiertoverRideRate
.[(ngModel)]
, Zwei-Wege-Antworten:
[(ngModel)]="overRideRate"
ist die Kurzform von[ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"
[ngModel]="overRideRate"
ist an dieoverRideRate
zu bindeninput.value
(ngModelChange)="overRideRate = $event"
istoverRideRate
mit dem Wert zu aktualisieren, zu deminput.value
daschange
Ereignis ausgegeben wurde.Zusammen bieten sie Angular2 für die bidirektionale Bindung.
quelle
[ngModel]="currentHero.name"
ist die Syntax für die Einwegbindung, während[(ngModel)]="currentHero.name"
ist für die bidirektionale Bindung und die Syntax setzt sich zusammen aus:[ngModel]="currentHero.name"
und(ngModelChange)="currentHero.name = $event"
Wenn Sie nur das Modell übergeben müssen, verwenden Sie das erste. Wenn Ihr Modell Änderungsereignisse abhören muss (z. B. wenn sich der Wert des Eingabefelds ändert), verwenden Sie das zweite.
quelle
Es ist ganz einfach, [] => Komponente zu Vorlage () => Vorlage zu Komponente
[(ngModel)]
ist eine Vertragsform von[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">
Weitere Details finden Sie hier: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel
quelle
Angular2 + Datenfluss:
In Angular können die Daten auf folgende Weise zwischen dem Modell (Komponentenklasse ts.file) und der Ansicht (HTML der Komponente) fließen:
Syntax:
Modell zum Anzeigen:
Diese Syntax wird auch als Eigenschaftsbindung bezeichnet . Wenn sich nun die
overRideRate
Eigenschaft des Eingabefelds ändert, wird die Ansicht automatisch aktualisiert. Wenn die Ansicht jedoch aktualisiert wird, wenn der Benutzer eine Nummer eingibt, wird dieoverRideRate
Eigenschaft nicht aktualisiert.Ansicht zum Modell:
Was hier passiert, ist, dass ein Ereignis ausgelöst wird (in diesem Fall Eingabeereignis, kann aber ein beliebiges Ereignis sein). Wir können dann Methoden der Komponentenklasse aufrufen oder die Eigenschaft direkt in einer Klasseneigenschaft speichern.
2-Wege-Datenbindung:
Die folgende Syntax wird für die bidirektionale Datenbindung verwendet. Es ist im Grunde ein syntaktischer Zucker für beide:
Jetzt ändert sich etwas in unserer Klasse. Dies spiegelt unsere Ansicht wider (Modell zu Ansicht). Wenn der Benutzer die Eingabe ändert, wird das Modell aktualisiert (Ansicht zu Modell).
quelle
[ngModel]
wertet den Code aus und generiert eine Ausgabe (ohne bidirektionale Bindung) .[(ngModel)]
wertet den Code aus und generiert eine Ausgabe sowie die bidirektionale Bindung .quelle