Angular问题：值为True但复选框未勾选，求排查原因

以下是几种常见的排查方向：

• 数据类型不匹配
  Angular的复选框[(ngModel)]仅识别小写的布尔值true/false，如果后端返回的是字符串类型的"True"/"true"，或者非标准的大写布尔值（如部分后端序列化后的True），Angular无法将其识别为有效布尔状态，导致复选框不勾选。
  可通过控制台打印确认类型：

  console.log(typeof detailCra.ttMatin, detailCra.ttMatin);
  

  解决方法：在赋值时转换为标准布尔值，比如：

  this.cra = cra;
  this.cra.missionCraDtos.forEach(mission => {
    mission.detailsCraDtos.forEach(detail => {
      detail.ttMatin = detail.ttMatin === true || detail.ttMatin === 'True' || detail.ttMatin === 'true';
    });
  });
  

• 重复的name属性
  循环生成的所有复选框都使用了相同的name="ttMatin"，在Angular表单中，重复的name会导致控件绑定冲突，影响ngModel的正常工作。
  解决方法：结合循环索引动态生成唯一name：

  <tr class="table-bordered-grey table-hover-custom" *ngFor="let missionCra of cra.missionCraDtos; let i = index" triggers="click:blur">
    <td *ngFor="let detailCra of missionCra.detailsCraDtos; let j = index" class="centered">
      <input type="checkbox" [(ngModel)]="detailCra.ttMatin" name="ttMatin-{{i}}-{{j}}">
    </td>
  </tr>
  

• 未导入FormsModule
  使用[(ngModel)]双向绑定必须在对应模块中导入FormsModule，若遗漏导入，ngModel绑定会完全失效。
  检查模块代码，确保imports数组包含：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // ...其他模块
      FormsModule
    ]
  })
  export class YourModule { }
  

• 变更检测未触发
  如果cra数据通过异步订阅赋值，但数据结构为不可变对象，Angular可能未检测到数据变化，导致模板未更新。
  解决方法：注入ChangeDetectorRef手动触发检测：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  loadCra() {
    this.activatedRoute.data.subscribe(({ cra }) => {
      this.cra = cra;
      this.cdr.detectChanges(); // 手动触发变更检测
    });
  }
  

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