AngularJS 1.6 Material复选框默认选中失效，请问问题出在哪

你遇到的问题核心是AngularJS指令和Angular属性绑定混用，加上多个控制选中状态的属性冲突，导致默认选中设置不生效。咱们一步步拆解问题：

问题点分析 #

1. 指令版本混乱：你用了AngularJS的ng-model指令，但同时又用了Angular的属性绑定[checked]——这俩是不同框架的写法，混在一起会让Angular不知道该以哪个为准。而且Angular里的双向绑定应该是[(ngModel)]，不是ng-model。
2. 冗余属性干扰：aria-checked="true"是给无障碍读屏用的辅助属性，它不会实际控制复选框的选中状态，硬编码成true反而会和你的状态绑定逻辑冲突。
3. 标签可能有误：如果是Angular Material 2+版本，正确的标签是<mat-checkbox>，旧的<md-checkbox>是AngularJS Material的写法，这也可能导致组件行为不符合预期。

正确解决方案 #

根据你的需求，推荐两种写法：

方案1：双向绑定（推荐，适合需要同步数据的场景）

用Angular的[(ngModel)]实现双向绑定，只需要在组件里初始化对应变量为true即可默认选中：

<mat-checkbox [(ngModel)]="loan.currentAsPermanent" aria-label="Checkbox 1">
  永久地址与当前地址相同
</mat-checkbox>

在组件类里初始化变量：

// 组件.ts文件中
loan = {
  currentAsPermanent: true // 初始化为true，复选框默认选中
};

方案2：单向绑定+事件监听（适合只控制状态的场景）

如果不需要双向同步，用[checked]绑定状态，配合(change)事件处理状态变化：

<mat-checkbox [checked]="isChecked" aria-label="Checkbox 1" (change)="handleCheckboxChange($event)">
  永久地址与当前地址相同
</mat-checkbox>

组件类里初始化并处理事件：

// 组件.ts文件中
isChecked = true; // 初始化为true，默认选中

handleCheckboxChange(event: MatCheckboxChange) {
  this.isChecked = event.checked;
  // 这里可以添加状态变化后的业务逻辑
}

额外注意事项 #

• 确保你安装的是Angular Material（包名@angular/material），而不是AngularJS的Material库，避免标签和指令不匹配的问题。
• 不要同时使用[(ngModel)]和[checked]，二者选其一即可，否则会出现状态冲突。

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