漯河市网站建设_网站建设公司_在线客服_seo优化

流程图

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"更新已选列表显示]

1. 用户点击 checkbox → 触发 (change) 事件

2. onChecked 方法：

根据 ‘testType’ 判断目标数组（这里是 selectedTestType）

遍历 testTypeList 找到点击的 item，切换它的 checked 状态

3. 更新已选数组：

通过 filter 把所有 checked = true 的 item 放入 selectedTestType

4. 页面更新：

*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>

解释：

1. *ngFor=“let item of testTypeList”

• 遍历 testTypeList 数组，为每个元素渲染一个 和对应的名字。

2. [checked]=“item.checked”

• 属性绑定，把 item.checked 的布尔值绑定到 checkbox 的 checked 属性上。

• 作用：根据 item.checked 的值决定 checkbox 是否被选中。

3. (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);}

解释逐行：

1. const targetList = selectedFilter === ‘testType’ ? this.selectedTestType : [];

• 根据 selectedFilter 判断目标列表（这里只有 ‘testType’，所以就是 selectedTestType）

• 目前这里定义了 targetList，但后面实际没用到它，可以认为是占位或者未来扩展用。

2. this.testTypeList.forEach(item => { … })

• 遍历原始数组 testTypeList

• 找到和当前点击的 item（event.name 相同）

• 执行 item.checked = !item.checked; → 切换勾选状态（选中 → 取消，取消 → 选中）

3. this.selectedTestType = this.testTypeList.filter(item => item.checked);

• 根据最新的 checked 状态更新 selectedTestType

• 结果：selectedTestType 只包含被选中的测试类型

3. [checked] + (change) 的作用总结

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 → 根据类型选择对应的操作数组