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

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?

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

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

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

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

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