绑定ngModel的复选框无法维持默认勾选？需手动取消才生效

你猜的没错！当你同时使用[(ngModel)]和原生checked属性时，Angular会优先遵循ngModel绑定的变量值，原生的checked属性会被直接忽略。也就是说，如果productDetails.iscanRetrunable的初始值不是true，哪怕你写了checked，复选框也不会默认勾选；就算初始值是true，后续如果变量被代码逻辑修改，复选框状态也会跟着变化。

下面给你几个具体的解决步骤：

• 第一步：初始化绑定变量为true
  在你的组件类里，确保productDetails.iscanRetrunable的初始值设置为true，这样页面加载时ngModel就会自动把复选框设为勾选状态：

  // 组件类中的示例代码
  productDetails = {
    iscanRetrunable: true // 初始默认勾选
  };
  

• 第二步：移除原生的checked属性
  既然已经通过ngModel绑定了初始值，原生的checked属性就完全多余了，甚至可能和ngModel产生冲突，直接删掉就行。修改后的HTML代码如下：

  <input type="checkbox" class="custom-control-input" [(ngModel)]="productDetails.iscanRetrunable" name="iscanRetrunable">
  

• 可选：防止程序自动修改（如果需要）
  如果你担心代码里其他逻辑不小心修改了这个变量的值，可以给变量加一层保护，只允许用户通过手动点击复选框来修改。比如用getter和setter来控制：

  // 组件类中的示例代码
  private _iscanRetrunable = true;
  
  get iscanRetrunable() {
    return this._iscanRetrunable;
  }
  
  set iscanRetrunable(value: boolean) {
    // 这里可以根据需求添加判断，比如只允许用户交互触发的修改
    this._iscanRetrunable = value;
  }
  

  对应的HTML也要改成绑定这个getter/setter：

  <input type="checkbox" class="custom-control-input" [(ngModel)]="iscanRetrunable" name="iscanRetrunable">
  

这样设置后，复选框就会默认处于勾选状态，而且只有用户手动点击才能取消勾选啦～

内容的提问来源于stack exchange，提问作者user9065878