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>

当用户检查任何chechbox时，它的值将变为true，并且基于此值，将显示已检查元素的数组。

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

<强> Plunker link

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

1 个答案: