Angular+TypeScript项目中如何渲染默认选中的checkbox

针对你遇到的问题，下面分两种常用表单场景给出可行的解决方法，同时说明你之前尝试的问题所在：

1. 模板驱动表单（使用 ngModel） #

如果你想用 ngModel，首先要确保在模块文件（比如 app.module.ts）里导入 FormsModule，否则 ngModel 不会生效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})
export class AppModule { }

然后在组件类里定义初始值：

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

HTML 里使用双向绑定（或单向绑定）：

<!-- 双向绑定，支持用户修改后同步到组件变量 -->
<input type="checkbox" [(ngModel)]="isChecked">

<!-- 单向绑定，仅设置初始状态，用户修改不会同步到组件变量 -->
<input type="checkbox" [ngModel]="isChecked">

2. 响应式表单（使用 FormControl） #

如果用响应式表单，直接在初始化 FormControl 时设置初始值为 true 即可：
首先确保模块导入 ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    ReactiveFormsModule
  ]
})
export class AppModule { }

组件类里创建表单控件：

import { FormControl, FormGroup } from '@angular/forms';

// 组件 .ts 文件
myForm = new FormGroup({
  agree: new FormControl(true) // 初始值设为 true
});

HTML 里绑定 formControlName：

<form [formGroup]="myForm">
  <input type="checkbox" formControlName="agree">
</form>

你之前尝试的问题说明 #

• 直接写 checked=isChecked：这是原生 HTML 的写法，在 Angular 里会把 isChecked 当成字符串而非组件变量，必须用方括号绑定 [checked]="isChecked" 才能读取组件里的布尔值。但注意：不要同时用 [checked] 和 ngModel/formControl，会导致状态冲突，Angular 表单控件会接管复选框的状态，应该通过控件初始值来设置默认选中。
• 使用 [defaultChecked]：Angular 不推荐用原生的 defaultChecked，因为表单控件的状态由 Angular 管理，原生属性会被覆盖，所以应该通过组件变量或表单控件初始值来设置默认状态。
• CSS :checked 伪类：只要复选框处于选中状态（不管是默认设置还是用户操作），伪类都会自动触发，不需要额外手动“触发”，只要正确设置初始选中状态即可生效。

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