각도 2/재질 2 : 체크 상자가 체크 됨 바인딩

Question

재질 (2.0.0-beta.1)을 사용하는 각도 2 (2.4.3) 앱이 있고 확인란에 바인딩 문제가 있습니다.

내 구성 요소의 부울 값에 따라 조건부로 선택란을 선택하고 싶습니다. 클릭하면 bool을 토글하고 싶습니다.

그래서 나는이 한 :

private _showName: boolean = true; 

을하고 HTML에서 :

<md-checkbox (click)="toggleName()" [checked]="_showName"></md-checkbox> 

그리고 toggleName()은 다음과 같습니다이 사용

toggleName(): void { 
    this._showName = !this._showName; 
    let ctrl = this._searchForm.get('name'); 
    ctrl.enabled ? ctrl.disable() : ctrl.enable(); 
} 

, 내가 체크 박스를 클릭 할 때 :

• 부울 _showName 거짓
• 로 전환됩니다 그러나 확인란 따라서 반대 논리를 떠나,

두 번째 시간 나는 그것이 자신을 선택하거나 선택 취소하고 다시 BOOL을 전환 확인란을 클릭 체크를 유지합니다.

나는이 같은 문자열을 사용 [checked]을 설정 한 경우 :

<md-checkbox (click)="toggleName()" [checked]="true"></md-checkbox> 

체크 박스가 첫 번째 클릭에 자신을 선택하거나 선택 취소하고 부울가 교체,하지만 지금은 나를 부울에 바인딩 할 수있는 방법은 없습니다. 따라서 구성 요소에서 bool을 변경하면 확인란에 반영되지 않습니다.

나는 아마도 뭔가 잘못하고 있지만, "예"를보고있다. official documentation 내가 어디로 잘못 가고 있는지 알 수 없다.

Answer 1

나는 그것을 작동 생각 :

<md-checkbox (click)="toggleName()" [attr.checked]="_showName"></md-checkbox> 

Answer 2

문제는 당신이 확인하고 즉시 취소한다는 것입니다. [checked] 바인딩을 제거하고 toggleName() 방법 내부 this._showName = !this._showName;하지 않습니다

는

toggleName(): void { 
    let ctrl = this._searchForm.get('name'); 
    ctrl.enabled ? ctrl.disable() : ctrl.enable(); 
} 

템플릿 :

<md-checkbox (click)="toggleName()"></md-checkbox> 

당신은 그것을 확인하고 선택하지 않은 자동으로됩니다 클릭합니다. 하지만 체크하지 않았거나 this._showName을 설정하여 직접 확인했습니다.

Answer 3

가장 좋은 방법은 변수를 md-checkbox 컨트롤로 바인딩하는 것입니다.

머티리얼 구성 요소

 <md-checkbox [(ngModel)]="_showName">{{_showName }} 

좋은 문서와 plunker 예제와 함께 제공됩니다. 다음은 그들을 찾을 수있는 방법입니다. How to open examples in plunker.또한

을 클릭하면 "<"또는 페이지하면서 ">", 소스 코드를 탐색 할 수