Unterschied zwischen [(ngModel)] und [ngModel] für den Bindungszustand an die Eigenschaft?

84

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?

Kleiner Drache
quelle
7
[ngModel]- Es ist nur eine Eigenschaftsbindung, keine Zwei-Wege-Bindung. Die Eingabe eines neuen Werts wird also nicht aktualisiert overRideRate.
VadimB
2
[(ngModel)] ist eine Zwei-Wege-Bindung, die von Angular 2 stammt. [ngModel] dient nur zum Anzeigen.
David Doan
2
Verfallsalarm: In Angular 6 ( angle.io/api/forms/FormControlName#use-with-ngmodel ) wird Folgendes angegeben : Die Unterstützung für die Verwendung der Eingabeeigenschaft ngModel und des ngModelChange-Ereignisses mit Anweisungen für reaktive Formulare wurde in Angular v6 veraltet und wird dies auch sein in Angular v7 entfernt. Siehe auch: ( stackoverflow.com/questions/50371079/… )
sboggs11
1
sboggs10 Der von Ihnen angegebene Link bezieht sich auf die Kombination von ngModel mit reaktiven Formen. Dies hängt in fast allen Fällen nicht mit der Frage zusammen.
Cesar Leonardo Ochoa Contreras
Hier ist eine gute Erklärung zu [(ngModel)], Zwei-Wege-
Datenbindung

Antworten:

136

[(ngModel)]="overRideRate" ist die Kurzform von [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

  • [ngModel]="overRideRate"ist an die overRideRatezu bindeninput.value
  • (ngModelChange)="overRideRate = $event"ist overRideRatemit dem Wert zu aktualisieren, zu dem input.valuedas changeEreignis ausgegeben wurde.

Zusammen bieten sie Angular2 für die bidirektionale Bindung.

Günter Zöchbauer
quelle
56

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

seidme
quelle
11

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:

  1. Vom Modell zur Ansicht.
  2. Von der Ansicht zum Modell.
  3. Daten fließen in beide Richtungen, auch als 2-Wege-Datenbindung bekannt .

Syntax:

Modell zum Anzeigen:

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

Diese Syntax wird auch als Eigenschaftsbindung bezeichnet . Wenn sich nun die overRideRateEigenschaft des Eingabefelds ändert, wird die Ansicht automatisch aktualisiert. Wenn die Ansicht jedoch aktualisiert wird, wenn der Benutzer eine Nummer eingibt, wird die overRideRate Eigenschaft nicht aktualisiert.

Ansicht zum Modell:

(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

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:

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

Die folgende Syntax wird für die bidirektionale Datenbindung verwendet. Es ist im Grunde ein syntaktischer Zucker für beide:

  1. Bindungsmodell zum Anzeigen.
  2. Bindungsansicht zum Modell

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

Willem van der Veen
quelle
5

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

Buzzzzzzz
quelle