将 false 设置为 [checkbox] DOM 属性不会取消选中 Angular 中的复选框答案

【问题标题】：setting false to [checkbox] DOM property not unchecking the checkbox in Angular将 false 设置为 [checkbox] DOM 属性不会取消选中 Angular 中的复选框
【发布时间】：2021-01-08 06:50:58
【问题描述】：

当用户单击停止单选按钮时，我试图取消选中 Time in Loop 复选框，但未取消选中 Time in Loop 复选框。

Stackblitz 网址 - https://stackblitz.com/edit/angular-ivy-s3ryzm?file=src/app/app.component.html

重现步骤：

点击GotoStream单选按钮。
选中循环时间复选框
点击Stop单选按钮，Time in Loop复选框必须取消选中，但不能取消选中。

下面是模板视图。

<div class="form-group ml-3">
  <div class="radio">
    <label>
      <input type="radio" name="optradio" checked [disabled]="Stop" (change)="dropDownStream=true; timeInLoopChecked=false; timeInLoop=true; timeInLoopInput=true" >&nbsp;Stop
    </label>
  </div>
  <div class="radio" >
    <label class="float-left w-25 mt-2 mr-2">
      <input type="radio" name="optradio" [disabled]="goToStream" (change)="dropDownStream = false; timeInLoopChecked=false; timeInLoop=false; timeInLoopInput=true" >&nbsp;GotoStream
    </label>
    <select class="custom-select float-left" style="width: 70%;" [disabled] = "dropDownStream">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
</div>


<div class="form-group vertical-group ml-3" style="clear: both;">
  <div class="checkbox">
    <label class="float-left w-25 mt-2 mr-2">
      <input type="checkbox" value="" [checked]="timeInLoopChecked" [disabled]="timeInLoop" (change)="timeInLoopInput=!timeInLoopInput" >&nbsp;&nbsp;Time in Loop
    </label>
    <input class="float-left" style="width: 70%;" placeholder="0" type="text" class="form-control" id="streamName"  autocomplete="off" [disabled]="timeInLoopInput"/>
  </div>
</div>

下面是组件文件：

export class AppComponent  {
  dropDownStream: boolean = true;
  timeInLoop: boolean = true;
  Stop: boolean=false;
  goToStream: boolean = false;
  timeInLoopInput: boolean = true;
  timeInLoopChecked: boolean = false;
}

当用户点击stop单选按钮时，如何使Time in Loop复选框不被选中？

谢谢，磨难

【问题讨论】：

标签： html angular checkbox

【解决方案1】：

刚刚更改了这一行：

 <input type="radio" name="optradio" [disabled]="goToStream" (change)="dropDownStream = false; timeInLoopChecked=true; timeInLoop=false; timeInLoopInput=true" >&nbsp;GotoStream

https://stackblitz.com/edit/angular-ivy-mbwfy2?file=src/app/app.component.html

您没有在单选按钮上切换timeInLoopChecked。

【讨论】：