Різниця між [(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)]обчислює код і генерує вихідні дані, а також забезпечує двостороннє прив'язку .