Разница между [(ngModel)] и [ngModel] для привязки состояния к свойству?

Вот пример шаблона:

<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">

<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">

Здесь они оба делают одно и то же. Какой из них предпочтительнее и почему?

[(ngModel)]="overRideRate" это краткая форма [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"привязать overRideRateкinput.value
• (ngModelChange)="overRideRate = $event"заключается в обновлении overRideRateзначения, input.valueкогда changeсобытие было создано .

Вместе они представляют собой то, что Angular2 предоставляет для двусторонней привязки.

[ngModel]="currentHero.name" - это синтаксис для односторонней привязки, а

[(ngModel)]="currentHero.name" предназначен для двусторонней привязки, а синтаксис составлен из:

[ngModel]="currentHero.name" и (ngModelChange)="currentHero.name = $event"

Если вам нужно только пройти модель, используйте первую. Если вашей модели необходимо прослушивать события изменения (например, при изменении значения поля ввода), используйте второе.

Это довольно просто [] => компонент для шаблона () => шаблон для компонента [(ngModel)]- это сокращенная форма[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

Подробнее здесь: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Angular2 + поток данных:

В Angular данные могут перемещаться между моделью (класс компонента ts.file) и представлением (html компонента) следующими способами:

1. От модели к виду.
2. От взгляда к модели.
3. Данные передаются в обоих направлениях, что также известно как двусторонняя привязка данных .

Синтаксис:

модель для просмотра:

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

Этот синтаксис также известен как привязка свойств . Теперь, если overRideRateсвойство поля ввода изменится, вид автоматически обновится. Однако, если представление обновляется, когда пользователь вводит число, overRideRate свойство не обновляется.

вид на модель:

(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

Здесь происходит то, что запускается событие (в данном случае событие ввода, но может быть любое событие). Затем мы можем вызвать методы класса компонента или напрямую сохранить свойство в свойстве класса.

Двусторонняя привязка данных:

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

Следующий синтаксис используется для двусторонней привязки данных. По сути, это синтаксический сахар для обоих:

1. Привязка модели к просмотру.
2. Привязка вида к модели

Теперь что-то меняется внутри нашего класса, это будет отражать наше представление (модель для просмотра), и всякий раз, когда пользователь изменяет ввод, модель будет обновляться (от представления к модели).

[ngModel]оценивает код и генерирует вывод (без двусторонней привязки) .
[(ngModel)]оценивает код и генерирует вывод, а также включает двустороннюю привязку .