Angular模板获取嵌套FormArray控件时遇‘对象可能为null’错误求助

针对你遇到的问题，这里有几种可行的解决方式：

方法1：使用$any()绕过类型检查 #

Angular模板的严格类型检查会认为comp.get('projects')可能返回null，可以用$any()告诉类型检查器忽略类型校验，直接访问控件：

<!--外层循环-->
<div *ngFor="let comp of companiesFormArr.controls; let i=index">
    <!--内层循环-->
    <div *ngFor="let project of $any(comp.get('projects')).controls; let j=index">
    </div>
</div>

这种方式简单直接，适合快速解决问题，前提是你能确定comp.get('projects')一定是一个FormArray。

方法2：在组件类中编写通用的FormArray获取方法 #

编写一个可复用的方法，明确返回FormArray类型，避免模板中的类型歧义：

// 组件类中的方法
getFormArray(control: AbstractControl, path: string): FormArray {
  // 这里用类型断言确保返回的是FormArray，需保证传入的path对应确实是FormArray
  return control.get(path) as FormArray;
}

然后在模板中调用这个方法：

<!--外层循环-->
<div *ngFor="let comp of companiesFormArr.controls; let i=index">
    <!--内层循环-->
    <div *ngFor="let project of getFormArray(comp, 'projects').controls; let j=index">
    </div>
</div>

这个方法可以复用在任何需要获取FormArray的场景，包括多层嵌套的循环。

方法3：用*ngIf结合变量赋值确保非空 #

通过ng-container和*ngIf将projects控件赋值给一个变量，确保后续循环时对象非空：

<!--外层循环-->
<div *ngFor="let comp of companiesFormArr.controls; let i=index">
    <ng-container *ngIf="comp.get('projects') as projectsArr">
        <!--内层循环-->
        <div *ngFor="let project of projectsArr.controls; let j=index">
        </div>
    </ng-container>
</div>

这种方式符合严格类型检查的要求，同时避免了空值访问的风险。

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