Angular2 ng仅获取选定的值

时间:2017-04-03 10:14:12

标签: angular

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

我怎样才能做到这一点?现在检查并取消选中值,多次添加相同的值。

2 个答案:

答案 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)将其删除。