Angular 12中复选框选中时如何切换父元素tr的class样式

最简单的实现方案（无需修改组件ts文件，仅改模板即可） #

直接用Angular模板引用变量读取复选框状态，动态绑定tr的class：

<tr [ngClass]="checkBox.checked ? 'checked_checkbox' : 'unchecked_checkbox'">
   <td>
      <div class="form-check">
         <input #checkBox class="form-check-input" type="checkbox" value="two" id="flexCheckDefault" />
         <label class="form-check-label" for="flexCheckDefault"></label>
      </div>
   </td>
</tr>

实现逻辑说明：

• 给复选框加模板引用变量#checkBox，可直接在当前模板内访问该元素的所有属性
• [ngClass]是Angular提供的动态class绑定语法，上面的写法表示：复选框选中时给tr加checked_checkbox类，未选中时保留原有的unchecked_checkbox类
• 你只需提前在样式文件里写好checked_checkbox对应的自定义样式即可生效

可选方案（需要在组件中获取选中状态时用） #

如果后续业务逻辑需要拿到这个复选框的选中状态，用双向绑定实现：

1. 先在组件ts文件中声明状态变量

// 你的component.ts文件中新增变量
isChecked = false;

2. 修改模板代码，绑定变量

<tr [ngClass]="isChecked ? 'checked_checkbox' : 'unchecked_checkbox'">
   <td>
      <div class="form-check">
         <input [(ngModel)]="isChecked" class="form-check-input" type="checkbox" value="two" id="flexCheckDefault" />
         <label class="form-check-label" for="flexCheckDefault"></label>
      </div>
   </td>
</tr>

注意：使用[(ngModel)]需要在当前所属模块的imports数组中引入FormsModule才能正常工作

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