Aquí hay una forma simple de usar ngModel (final Angular 2)

 <!-- my.component.html --> <div class="form-group"> <label for="options">Options:</label> <div *ngFor="let option of options"> <label> <input type="checkbox" name="options" value="{{option.value}}" [(ngModel)]="option.checked"/> {{option.name}} </label> </div> </div>

 // my.component.ts @Component({ moduleId:module.id, templateUrl:'my.component.html'}) export class MyComponent { options = [ {name:'OptionA', value:'1', checked:true}, {name:'OptionB', value:'2', checked:false}, {name:'OptionC', value:'3', checked:true} ] get selectedOptions() { // right now: ['1','3'] return this.options .filter(opt => opt.checked) .map(opt => opt.value) } }

¡He encontrado una solución gracias a Gunter! Aquí está mi código completo si pudiera ayudar a alguien:

 <div class="form-group"> <label for="options">Options :</label> <div *ngFor="#option of options; #i = index"> <label> <input type="checkbox" name="options" value="{{option}}" [checked]="options.indexOf(option) >= 0" (change)="updateCheckedOptions(option, $event)"/> {{option}} </label> </div> </div>

Aquí están los 3 objetos que estoy usando:

 options = ['OptionA', 'OptionB', 'OptionC']; optionsMap = { OptionA: false, OptionB: false, OptionC: false, }; optionsChecked = [];

Y hay 3 métodos útiles:

1 . Para iniciar optionsMap :

 initOptionsMap() { for (var x = 0; x<this.order.options.length; x++) { this.optionsMap[this.options[x]] = true; } }

2. para actualizar el mapa de optionsMap :

 updateCheckedOptions(option, event) { this.optionsMap[option] = event.target.checked; }

3. para convertir optionsMap en optionsChecked y almacenarlo en options antes de enviar la solicitud POST:

 updateOptions() { for(var x in this.optionsMap) { if(this.optionsMap[x]) { this.optionsChecked.push(x); } } this.options = this.optionsChecked; this.optionsChecked = []; }

crear una lista como: -

 this.xyzlist = [ { id: 1, value: 'option1' }, { id: 2, value: 'option2' } ];

html:-

 <div class="checkbox" *ngFor="let list of xyzlist"> <label> <input formControlName="interestSectors" type="checkbox" value="{{list.id}}" (change)="onCheckboxChange(list,$event)">{{list.value}}</label> </div>

luego en su componente ts :-

 onCheckboxChange(option, event) { if(event.target.checked) { this.checkedList.push(option.id); } else { for(var i=0 ; i < this.xyzlist.length; i++) { if(this.checkedList[i] == option.id) { this.checkedList.splice(i,1); } } } console.log(this.checkedList); }