상태를 속성에 바인딩 할 때 [(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.valuechange

이들은 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)]코드를 평가하고 출력을 생성하며 양방향 바인딩도 활성화 합니다.