Question

我搜索了很多，但找不到我正在寻找的正确答案。我希望在表单中有一组复选框，如果选中它们，它们的工作正确并在div标签中显示。

export class MyComponent {
options = [
{name:'OptionA', value:'1', checked:true},
{name:'OptionB', value:'2', checked:false},
{name:'OptionC', value:'3', checked:true}
]
get selectedOptions() { // right now: ['1','3']
return this.options
          .filter(opt => opt.checked)
          .map(opt => opt.value)
  }
}

和html：

<div class="form-group">
<label for="options">Options:</label>
<div *ngFor="let option of options">
    <label>
        <input type="checkbox"
               name="options"
               value="{{option.value}}"
               [(ngModel)]="option.checked"/>
        {{option.name}}
    </label>
</div>

但我确定它不正确，因为被检查的属性由我自己提供，如果用户更改它不起作用。你能帮我写一个简单的复选框代码吗？非常感谢你。

Answer 1

您需要设置[checked]属性，同时删除ngModel并将值绑定到(change)事件：

<label>
    <input type="checkbox"
           name="options"
           value="{{option.value}}"
           [checked]="option.checked" 
           (change)="option.checked = !option.checked"/>
    {{option.name}}
</label>

一组正确的复选框

1 个答案: