Wie verwende ich Angular2 CheckboxControlValueAccessor?

Question

Kann mir jemand helfen, CheckboxControlValueAccessor in Angular2 zu implementieren? Kann jemand ein Beispiel teilen, um CheckboxControlValueAccessor zu benutzen?

Ich habe eine JSON, die von einer API abrufen dh

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

Jetzt muss ich eine Komponente und zugehörige Vorlage erstellen, die dynamisch Form/Checkbox-Feld erstellen und den ausgewählten Wert als N oder Y. I zugreifen Auch erforderlich, um die Auswahländerungen nach Benutzer zu verfolgen.

Die Komponentendatei ist:

@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; 
}} 

Der Template-Schnipsel ist wie:

< 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

Verwenden Sie diese Art und Weise für ausgewählten Checkbox Wert in Angular2 erhalten:

@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) 
    } 

}