当在Angular应用程序中使用虚拟滚动时，FormControl可能会失去绑定。要解决这个问题，可以使用trackBy函数来追踪每个FormControl的值。以下是示例代码：

1. 组件的逻辑部分

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyFormComponent {
  items = [
    { id: '1', value: 'item1' },
    { id: '2', value: 'item2' },
    { id: '3', value: 'item3' },
    { id: '4', value: 'item4' },
    { id: '5', value: 'item5' },
    { id: '6', value: 'item6' },
    { id: '7', value: 'item7' },
    { id: '8', value: 'item8' },
    { id: '9', value: 'item9' },
    { id: '10', value: 'item10' },
  ];

  trackByFn(index: number, item: any) {
    return item.id;
  }

  getControl(index: number) {
    return this.formControls[index];
  }

  formControls = this.items.map((_) => new FormControl(false));
}

2. 组件的HTML部分

   

      {{item.value}}
   

在这个示例中，我们使用了Angular Material库的mat-checkbox组件和cdk-virtual-scroll-viewport指令。我们使用的FormControl在formControls数组中被单独生成，在getControl函数中被动态调用。我们通过传递trackByFn函数给cdkVirtualFor指令来保持FormControl的绑定。

这里的关键是trackByFn函数，该函数接受一个索引和一个值并追踪每个FormControl的值。由于VirtualScroll对每个FormControl实例都执行了单独的changeDetection