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

89

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

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

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

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

Маленький дракончик
источник
7
[ngModel]- это только привязка свойств, а не двусторонняя привязка. Таким образом, ввод нового значения не будет обновляться overRideRate.
VadimB
2
[(ngModel)] - это двусторонняя привязка, исходящая из Angular 2. [ngModel] предназначена только для демонстрации.
Дэвид Доан
2
Предупреждение об устаревании : в Angular 6 ( angular.io/api/forms/FormControlName#use-with-ngmodel ) указано следующее: Поддержка использования свойства ввода ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалено в Angular v7. Также см .: ( stackoverflow.com/questions/50371079/… )
sboggs11
1
sboggs10 Ссылка, которую вы предоставили, относится к объединению ngModel с реактивными формами, это почти не связано с вопросом.
Сезар Леонардо Очоа Контрерас
Вот хорошее объяснение о том [(ngModel)], Двухсторонний Привязка данных в угловых
cateyes

Ответы:

147

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

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

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

Гюнтер Цёхбауэр
источник
58

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

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

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

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

Seidme
источник
11

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. Привязка вида к модели

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

Виллем ван дер Вин
источник
5

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

Buzzzzzzz
источник