다음은 템플릿 예입니다.
<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)간에 흐를 수 있습니다.
- 모델에서보기로.
- 보기에서 모델로.
- 데이터는 양방향 데이터 바인딩 이라고도하는 양방향으로 흐릅니다 .
통사론:
볼 모델 :
<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" >
다음 구문은 양방향 데이터 바인딩에 사용됩니다. 기본적으로 두 가지 모두에 대한 구문 설탕입니다.
- 보기에 바인딩 모델.
- 보기를 모델에 바인딩
이제 클래스 내에서 무언가 변경되면 뷰 (모델에서 뷰로)를 반영하고 사용자가 입력을 변경할 때마다 모델이 업데이트됩니다 (뷰에서 모델로).
답변
[ngModel]코드를 평가하고 출력을 생성합니다 (양방향 바인딩 없음) .
[(ngModel)]코드를 평가하고 출력을 생성하며 양방향 바인딩도 활성화 합니다.
답변
