我有一个for循环,将预定义的爱好填充为复选框。
hobbies = ['Sport', 'Reading', 'Singing', 'Travelling', 'Movies', 'Cooking'];
<label *ngFor="let hobby of chunk" #checkbox class="mdl-checkbox mdl-js-checkbox">
<input type="checkbox" name="hobbies" [value]="hobby"
[(ngModel)]="hobby.selected" (change)="populateMyHobbies(hobby)" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">{{hobby}}</span>
</label>
我创建了一个数组my_hobbies: string[]=[];
,其中我只想收集所选的值,即['Sport',..]
我收集这些值的函数到目前为止:
populateMyHobbies(value){
this.my_hobbies.push(value)
console.log(this.my_hobbies)
}
我怎样才能做到这一点?现在检查并取消选中值,多次添加相同的值。
答案 0 :(得分:3)
模板方:
<label *ngFor="let hobby of chunk" #checkbox class="mdl-checkbox mdl-js-checkbox">
<input type="checkbox" name="hobbies" [value]="hobby"
[(ngModel)]="hobby.selected" (change)="populateMyHobbies(hobby,$event.target.checked)" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">{{hobby}}</span>
</label>
组件方:
selectedHobbies = [];
populateMyHobbies(value , status:boolean)
{
if(this.selectedHobbies.indexOf(value) === -1 && status)
{
this.selectedHobbies.push(value);
}
else if(!status)
{
let index = this.selectedHobbies.indexOf(value);
this.selectedHobbies.splice(index, 1);
}
}
答案 1 :(得分:0)
您需要将检查事件作为参数传递给populateMyHobbies
,然后阅读event.target.checked
以检查复选框是选中还是取消选中(Like the answer here)。
您可以通过检查array.indexOf(value)
是否返回-1来检查数组是否包含值,并使用array.splice(index,1)
(As in this answer)将其删除。