속성에 대한 바인딩 상태에 대한 [(ngModel)]과 [ngModel]의 차이점은 무엇입니까?

속성에 대한 바인딩 상태에 대한 [(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 을 참조하십시오.

각도 2+ 데이터 흐름:

각도에서 데이터는 다음과 같은 방법으로 모형(성분 클래스 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)]코드를 평가하고 출력을 생성하며 양방향 바인딩도 활성화합니다.

언급URL : https://stackoverflow.com/questions/42504918/difference-between-ngmodel-and-ngmodel-for-binding-state-to-property