Angular2 ngFor 仅获取选定的值答案

【问题标题】：Angular2 ngFor get only selected valuesAngular2 ngFor 仅获取选定的值
【发布时间】：2017-08-28 03:51:32
【问题描述】：

我有一个 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)
}

我怎样才能做到这一点？现在选中和取消选中的值会被多次添加甚至相同的值。

【问题讨论】：

标签： angular

【解决方案1】：

模板方面：

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

【讨论】：

太棒了！这正是我想要的。非常感谢！
@Nitish，太好了，您也接受答案吗？
是的，当然！只是我必须等待几分钟才能接受：0

【解决方案2】：

您需要将 check 事件作为参数传递给 populateMyHobbies，然后读取 event.target.checked 以检查复选框是选中还是未选中 (Like the answer here)。

您可以通过检查array.indexOf(value)是否返回-1来检查数组是否包含值，并使用array.splice(index,1)（As in this answer）将其删除。

【讨论】：