Angular2 CheckboxControlValueAccessor를 사용하는 방법?

Question

누구나 Angular2에서 CheckboxControlValueAccessor를 구현하는 데 도움을 줄 수 있습니까? 누구나 CheckboxControlValueAccessor를 사용하는 예제를 공유 할 수 있습니까?

나는 즉

{"prefer":[{"name":"Send me Offers and Letters","preferenceId":"OffersAndLetter","selected":"Y"},{"name":"Need monthly reports","preferenceId":"monthlyReports","selected":"N"}],"comments":null,"status":"SUCCESS","errorDetails":[]} 

지금 내가 동적으로 형태/체크 박스 필드를 만들고 N 또는 Y를 I로 선택한 값에 액세스 구성 요소 및 관련 템플릿을 작성해야하는 API에서 검색 JSON을 사용자에 의한 선택 변경 사항도 추적해야합니다.

컴포넌트 파일은 다음과 같습니다

@Component({ 
selector: 'ae-preferencesdata', 
moduleId: module.id, 
templateUrl: './preferences.html', 
directives: [REACTIVE_FORM_DIRECTIVES, ControlMessages], 
providers: [SavePreferences]}) 

export class PreferencesComponent { 
public editPreferencesForm: any; 
OffersAndLetter: boolean; 
monthlyReports: boolean; 

public _preferencesValue: Preferences = new Preferences(); 
constructor(private _formBuilder: FormBuilder, private _router: Router, 
    private _routeParams: RouteParams, public _editService: EditPreferences) { } 

ngOnInit() { 
    this.editPreferencesForm = this._formBuilder.group({ 
     'OffersAndLetter': this.OffersAndLetter, 
     'monthlyReports': this.monthlyReports 
    }); 
} 

public populatingFields() { 
    if (this.OffersAndLetter !== undefined) { 
     this._preferencesValue.OffersAndLetter = 
      this.OffersAndLetter === true ? 'Y' : 'N'; 
    } else { 
     this._preferencesValue.OffersAndLetter = $('#OffersAndLetter').val(); 
    } 
    if (this.monthlyReports !== undefined) { 
     this._preferencesValue.monthlyReports = 
      this.monthlyReports === true ? 'Y' : 'N'; 
    } else { 
     this._preferencesValue.monthlyReports = $('#monthlyReports').val(); 
    } 
} 

public savePreferences() { 
    this.populatingFields(); 
    let resp = this._editService.updateSchemePreferences(this._preferencesValue, workFlowStepCode, 
     parseInt(this._workflowActivityNo)); 
    resp.subscribe(
     data => { 
      if (data.status === 'SUCCESS') { 
       formSubmitted = true; 
      } 
     }, 
     error => { 
      let errorText = error.text(); 
      this._serverError = error.text().replace(/"/g, ''); 
     } 
     }); 
} 

public updateField(data) { 
    let targetID = data.target.id; 
    if (targetID === 'OffersAndLetter') { 
     this.OffersAndLetter = data.target.checked; 
    } else if (targetID === 'monthlyReports') { 
     this.monthlyReports = data.target.checked; 
    } 

} 

private setDefaultValues() { 
    this.OffersAndLetter = undefined; 
    this.monthlyReports = undefined; 
}} 

템플릿 조각은 같은 것입니다 :

< td *ngFor="let subattribute of prefer" >< input type="checkbox" name="{{subattribute.preferenceId}}{{subattribute.name}}" id="{{subattribute.preferenceId}}" 
(change)="updateField($event)" class="i-checks m-l-mds" [value]="subattribute.selected" 
></ td> 

Answer 1

사용 Angular2 선택 체크 박스 값을 얻기 위해이 방법 :

@Component({ 
    selector: 'checkbox', 
    template : ` 
    <ul> 
    <li *ngFor="let chk of chkArray"> 
     <input type="checkbox" (change)="selectChk($event,chk.id)" /> 
     <span>{{chk?.title}}</span> 
    </li> 
    </ul> 
    `, 
}) 

export class CheckboxComponent{ 

    private chkSelected: Array<any>=[]; 
    private chkArray:any = [ 
     {id:1,title:'title1'}, 
     {id:2,title:'title2'}, 
     {id:3,title:'title3'} 
    ]; 

    selectChk(event, val){ 
     if(event.target.checked === true){ 
      this.chkSelected.push(val); 
     }else{ 
      var index = this.chkSelected.indexOf(val); 
      this.chkSelected.splice(index, 1); 
     } 
     console.log(this.chkSelected) 
    } 

}