angular CLI - 动态更改组件中的复选框并不会实际更改其状态

Question

我在表单中使用了一些复选框来控制按钮+保存状态。我将在下面的代码中解释这个问题。

<form role="form" name="layoutbutton" (ngSubmit)="save(layoutbutton.value)" #layoutbutton="ngForm" for="layoutbutton" ui-jq="validate">  
<div class="col-md-12">
<div class="col-md-6">
<div class="row">
<h5>PGM</h5>    
<div class="row-md-6">
<div class="form-group">
<input class="onoffswitch-checkbox" id="cam1c" name="cam1c" type="checkbox" (change)="cam1.hidden = !cam1.hidden" #cam1c="ngModel" [(ngModel)]=layoutbutton.cam1c>
<label class="onoffswitch-label" for="cam1c">CAM 01
<span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="row-md-6">
  <div class="form-group">
<input class="onoffswitch-checkbox" type="checkbox" id="cam2c" name="cam2c" (change)="cam2.hidden = !cam2.hidden" #cam2c="ngModel" [(ngModel)]=layoutbutton.cam2c>
<label class="onoffswitch-label" for="cam2c">CAM 02
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="row-md-6">
  <div class="form-group">
  <input class="onoffswitch-checkbox" type="checkbox" id="cam3c" name="cam3c" (change)="cam3.hidden = !cam3.hidden" #cam3c="ngModel" [(ngModel)]=layoutbutton.cam3c>
  <label class="onoffswitch-label" for="cam3c">CAM 03
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</form>

从我的组件我动态设置复选框$("#cam1c").prop('checked', true);

在此之后，如果我提交表单，我没有使用组件中的以下代码获取复选框值。而是为了复选框变空。

save(data) {
this.submitted = true;
console.log("this.data",data.cam1c);
}