angular virtual scroll 渲染 FormArray 滚动中间时顺序错乱?

Question

代码demo
https://stackblitz.com/edit/a...

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  form: FormGroup;

  get peoples(): FormArray {
    return this.form.get('peoples') as FormArray;
  }

  constructor(private _fb: FormBuilder) {
    this.form = this._fb.group({
      peoples: this._fb.array([]),
    });

    let t = 0;
    let j = 0;
    for (let i = 0; i < 10000; i++) {
      this.peoples.push(this._fb.group({ index: j, start: t, end: t + 1 }));
      t += 3;
      j++;
    }
  }
}

<form [formGroup]="form">
  <div formArrayName="peoples">
    <cdk-virtual-scroll-viewport
      appendOnly
      itemSize="48"
      class="example-viewport"
    >
      <div
        *cdkVirtualFor="let item of form.get('peoples').controls; let i = index"
        class="example-item"
        [formGroupName]="item.value.index"
      >
        <div>
          {{ item.value.index }}
          {{ item.value.start }}
          {{ item.value.end }}
          <input
            type="text"
            [id]="'start' + item.value.index"
            formControlName="start"
          />
          <input
            type="text"
            [id]="'end' + item.value.index"
            formControlName="end"
          />
        </div>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>
</form>

Answer 1

解决了，自问自答

https://github.com/angular/co...

Works for me if I change [formGroupName]="i" to [formGroup]="item"