cdkVirtualFor与FormArray配合失效问题排查与解决

问题现象 #

用cdkVirtualFor替代ngFor处理大规模FormArray时，组件仅显示viewport-container大小的空白区域，无任何表单项渲染。此前ngFor可正常显示，且用普通模拟数组（如[1,2,3...]）测试cdkVirtualFor功能正常，仅搭配FormArray时失效。

相关代码 #

HTML模板 #

<cdk-virtual-scroll-viewport
  [itemSize]="100"
  class="viewport-container"
  [formArrayName]="'items'"
>
  <div
    *cdkVirtualFor="
    let item of myFormArray.controls;
    let i = index;
    "
    [formGroupName]="i"
  >
    <div
    fxFlex
    fxLayout="row"
    fxLayoutAlign="start center"
    fxLayoutGap="17px"
    >
      <label>
        {{ i + 1 }}
      </label>
      <our-custom-form-field
        fxFlex
        [errorMessages]="validationErrors"
        [formControlName]="'option1'"
      >
        <input
         type="float"
        />
      </our-custom-form-field>
      <our-custom-form-field
        fxFlex
        [errorMessages]="validationErrors"
        [formControlName]="'option2'"
      >
        <input
          type="float"
         />
         </our-custom-form-field>
     </div>
  </div>
</cdk-virtual-scroll-viewport>

TypeScript代码 #

// FormArray getter
get myFormArray(): FormArray {
    return this.myFormBase?.get('items') as FormArray;
}

// 表单初始化
this.myFormBase = this.formBuilder.group({
  items: new FormArray([])
});

问题根源 #

cdkVirtualFor初始化阶段，myFormArray为null（因myFormBase可能异步初始化或后续才赋值），当FormArray后续完成赋值时，CDK虚拟滚动已完成初始渲染，未检测到数组变化，导致无法触发重新渲染。

解决办法 #

1. 确保FormArray在视图初始化前就绪
   提前初始化myFormBase和对应的FormArray，比如在ngOnInit中同步完成表单构建，避免延迟赋值：

   ngOnInit(): void {
     this.myFormBase = this.formBuilder.group({
       items: this.formBuilder.array([]) // 提前初始化空数组，而非后续赋值
     });
     // 加载初始数据后立即更新FormArray
     this.loadInitialItems();
   }
   
   private loadInitialItems(): void {
     // 模拟异步加载数据后更新FormArray
     const items = [...]; // 业务数据
     items.forEach(item => {
       (this.myFormArray as FormArray).push(this.formBuilder.group({
         option1: [''],
         option2: ['']
       }));
     });
   }
   

2. 手动触发变更检测
   若无法避免异步赋值，可在FormArray更新后，通过ChangeDetectorRef强制触发视图更新：

   import { ChangeDetectorRef } from '@angular/core';
   
   constructor(private cdr: ChangeDetectorRef) {}
   
   // FormArray赋值完成后调用
   private onFormArrayReady(): void {
     this.cdr.detectChanges();
   }
   

3. 添加trackBy函数
   为cdkVirtualFor指定trackBy函数，帮助CDK更准确识别数组项变化，避免漏更同时提升渲染效率：

   <div
     *cdkVirtualFor="
     let item of myFormArray.controls;
     let i = index;
     trackBy: trackByIndex
     "
     [formGroupName]="i"
   >
   

   trackByIndex(index: number): number {
     return index;
   }
   

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