如何获取多个选中的复选框值？

Question

我拿来从数据库中的复选框的名字，摆阵，使他们看起来像这样：

pets = ['dog', 'hamster', 'cat', 'parrot'] 

然后我展示他们对我通过以下方式查看：

<div *ngFor='let pet of pets'> 
    <input type='checkbox' 
    name='pets' 
    value='{{pet}}' 
    /> 
    {{pet}} 
</div> 

所以，现在的问题我如何只收集检查的值，以便我可以将这些值发送给服务器？

Answer 1

我建议你使用一个对象数组而不是数组，因为我认为这几乎不可能或很难实现你想要的。

我们可以做出如下的变量：

pets = [{key: 'dog', isChecked: false}, {key: 'hamster', isChecked: false}, {key: 'cat', isChecked: false}]; 

而且每个对象有ngModel连接，这将保持每个复选框的值。

<div *ngFor='let pet of pets'> 
    <input type='checkbox' 
    name='pets' 
    value='{{pet}}' 
    [(ngModel)]='pet.isChecked' 
    (change)='check()' 
    /> 
    {{pet.key}} - {{pet.isChecked}} 
</div> 

当用户检查任何chechboxes的，它的值将转向true，并在此基础上的值，检查元件的阵列将被显示。

check(){ 
    this.arr = []; 
    this.pets.forEach(v => v.isChecked ? this.arr.push(v.key) : v); 
} 

Plunker link