一组正确的工作复选框

问题描述：

我搜索了很多，但找不到正确的答案，我正在寻找。我想要一组复选框的形式，如果他们被检查，他们工作正确，并显示在一个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>

但我敢肯定，因为checked属性由自己给出，如果用户更改它不工作，这是不正确的。你能帮我写一个简单的复选框代码吗？非常感谢。

答

您需要设置[checked]属性，还能去除ngModel，只是绑定价值(change)事件：

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

一组正确的工作复选框

相关推荐