Angular 15嵌套FormArray的*ngFor高效渲染方案问询

在开发大型响应式表单项目时遇到性能瓶颈，核心问题是在Angular 15中如何高效选取嵌套FormArray并通过*ngFor渲染。

表单结构示例 #

MainFormGroup {
    ParentFormArray {
       ...
       FormGroup {
           ...
           NestedFormArray {
                ...
                FormGroup { ... }
                ...
           }
           ...
       }
       ...
    }
}

Angular 15中无法沿用旧版写法form.controls['ParentFormArray'].controls进行渲染，因为AbstractControl没有controls属性，必须明确将其指定为FormArray类型。

现有三种实现方案及优缺点 #

• 方案1：TS中编写无参Getter
  在组件类中定义返回FormArray的Getter，但该方式无法接收参数（比如无法指定NestedFormArray对应的父FormGroup），灵活性不足。

• 方案2：带参数的方法返回FormArray
  编写可接收路径参数的方法来获取指定嵌套FormArray，但Getter和这类方法会在每次变更检测时触发，在默认变更检测策略下，仅一次页面点击就可能触发数十次调用，带来明显性能开销。

• 方案3：纯管道获取FormArray
  编写纯管道来转换获取FormArray，测试发现该管道仅在初始渲染时调用一次，性能表现远优于前两种方案。

管道实现示例 #

@Pipe({ name: "getArray", pure: true })
export class GetArrayPipe {
    transform (formGroup: AbstractControl, path?: string): FormArray | null {
        return path ? <FormArray>formGroup.get(path) : <FormArray>formGroup;
    }
}

管道使用方式 #

<!-- 父级FormArray渲染 -->
<accordion *ngFor="let parentItem of (ParentFormArray | getArray).controls; let i = index">
<!-- 嵌套级FormArray渲染 -->
<accordion *ngFor="let nestedItem of (parentItem | getArray:'NestedFormArray').controls; let i = index">

问题 #

是否存在比上述方案更优的多级嵌套表单渲染方式？

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