用户点击 checkbox → 触发 (change) 事件流程详细介绍
流程图
A[用户点击 checkbox]-->B[(change)触发onChecked(item,'testType')]B-->C[方法内部判断 selectedFilter==='testType']C-->|true|D[选择目标数组 targetList=selectedTestType]C-->|false|E[选择空数组 targetList=[]]D-->F[遍历 testTypeList 找到 item]F-->G[切换 item.checked状态(true<->false)]G-->H[更新 selectedTestType]H-->I[selectedTestType=testTypeList.filter(item.checked)]I-->J[页面通过*ngFor="let item of testTypeList"更新 checkbox 状态]I-->K[页面通过*ngFor="let item of selectedTestType"更新已选列表显示]用户点击 checkbox → 触发 (change) 事件
onChecked 方法：
根据 ‘testType’ 判断目标数组（这里是 selectedTestType）
遍历 testTypeList 找到点击的 item，切换它的 checked 状态
- 更新已选数组：
通过 filter 把所有 checked = true 的 item 放入 selectedTestType
- 页面更新：
*ngFor=“let item of testTypeList” → checkbox 选中状态同步
*ngFor=“let item of selectedTestType” → 已选列表显示最新内容
```javascript <div *ngFor="let item of testTypeList"> <input type="checkbox" [checked]="item.checked" (change)="onChecked(item, 'testType')" /> {{ item.name }} </div>onChecked(event:any,selectedFilter:string){consttargetList=selectedFilter==='testType'?this.selectedTestType:[];this.testTypeList.forEach(item=>{if(item.name===event.name){item.checked=!item.checked;}});// 更新 selectedTestTypethis.selectedTestType=this.testTypeList.filter(item=>item.checked);}HTML 部分
<div*ngFor="let item of testTypeList"><input type="checkbox"[checked]="item.checked"(change)="onChecked(item, 'testType')"/>{{item.name}}</div>解释：
- *ngFor=“let item of testTypeList”
- 遍历 testTypeList 数组，为每个元素渲染一个 和对应的名字。
- [checked]=“item.checked”
属性绑定，把 item.checked 的布尔值绑定到 checkbox 的 checked 属性上。
作用：根据 item.checked 的值决定 checkbox 是否被选中。
- (change)=“onChecked(item, ‘testType’)”
事件绑定，监听 checkbox 的 change 事件（用户点击 checkbox 后触发）。
触发时调用组件方法 onChecked，传入：
item → 当前 checkbox 对应的对象
‘testType’ → 用于区分不同的过滤类型或用途（这里是 testType）
2. TypeScript 部分
onChecked(event:any,selectedFilter:string){consttargetList=selectedFilter==='testType'?this.selectedTestType:[];this.testTypeList.forEach(item=>{if(item.name===event.name){item.checked=!item.checked;}});// 更新 selectedTestTypethis.selectedTestType=this.testTypeList.filter(item=>item.checked);}解释逐行：
- const targetList = selectedFilter === ‘testType’ ? this.selectedTestType : [];
根据 selectedFilter 判断目标列表（这里只有 ‘testType’，所以就是 selectedTestType）
目前这里定义了 targetList，但后面实际没用到它，可以认为是占位或者未来扩展用。
- this.testTypeList.forEach(item => { … })
遍历原始数组 testTypeList
找到和当前点击的 item（event.name 相同）
执行 item.checked = !item.checked; → 切换勾选状态（选中 → 取消，取消 → 选中）
- this.selectedTestType = this.testTypeList.filter(item => item.checked);
根据最新的 checked 状态更新 selectedTestType
结果：selectedTestType 只包含被选中的测试类型
3. [checked] + (change) 的作用总结
| 写法 | 含义 |
|---|---|
[checked]="item.checked" | 根据数据决定 checkbox 是否选中 |
(change)="onChecked(item, 'testType')" | 用户点击 checkbox 后触发事件，调用方法更新数据 |
4. (change)=“onChecked(item, ‘testType’)” /> const targetList = selectedFilter === ‘testType’ ? this.selectedTestType : []; 关系和含义
1️⃣ (change)=“onChecked(item, ‘testType’)”
作用：监听 的 change 事件。
用户每次点击 checkbox（选中或取消）时，就会触发 change 事件。
调用组件方法 onChecked，传入两个参数：
item → 当前 checkbox 对应的数据对象（例如 { name: ‘DRE’, checked: true }）
‘testType’ → 表示这是 “测试类型” 的 checkbox，用于方法内部区分不同类别的 checkbox 或过滤类型
== 理解：这行代码实现了 用户操作 → 调用方法更新数据 的连接。==
2️⃣ const targetList = selectedFilter === ‘testType’ ? this.selectedTestType : [];
作用：在 onChecked 方法里，根据 selectedFilter 的值选择对应的目标数组。
解释逻辑：
selectedFilter==='testType'?this.selectedTestType// 如果是 testType，则操作 selectedTestType:[]// 否则返回空数组（可以扩展其他类型）用法：
targetList 本质上是一个 引用变量，理论上可以用它来操作选中数组，例如 push 或 splice。
在你提供的代码里，targetList 目前没有被直接使用，实际上更新 selectedTestType 是通过：
this.selectedTestType = this.testTypeList.filter(item => item.checked);
所以 targetList 这里相当于 占位或备用变量，未来可以用来扩展支持其他类型的 checkbox。
总结两行的关系
(change)=“onChecked(item, ‘testType’)”
触发事件，把用户点击的 checkbox 和类型 ‘testType’ 传给方法
const targetList = selectedFilter === ‘testType’ ? this.selectedTestType : [];
方法内部根据类型选择操作的目标数组（这里是 selectedTestType）
当前代码里未直接使用 targetList，但逻辑上用于支持多类型 checkbox 管理
💡 理解技巧：
change → 用户动作触发
‘testType’ → 类型标识
targetList → 根据类型选择对应的操作数组