Объект Reactive Form Array Object обновлен, но список виртуальной прокрутки не обновляется в интерфейсе

Question

Воспроизведение: https://stackblitz.com/edit/angular-rf-virtual-scroll

Ожидаемое поведение: Данные должны добавляться в список виртуальной прокрутки в пользовательском интерфейсе

Фактическое поведение

=> Список виртуальной прокрутки не обновляется (передний конец) => Реактивный объект массива форм обновлен отлично (в тс)

Answer 1

Надеюсь, это поможет ...

app.component. html

    <div class="container">
    <div class="content" [formGroup]="testForm">
        <ng-container formArrayName="data" *ngFor="let item of testForm.get('data')['controls']; let i = index">
            <div [formGroupName]="i">
                Name: <input class="form-control" style="margin-bottom: 5px;" type="text" formControlName="name">
            </div>
        </ng-container>
    </div>
    <div class="row">
        <button class="btn btn-primary" (click)="addItem()">Add Name</button>
    </div>
</div>

app.component.ts

export class AppComponent implements OnInit {
 testForm: FormGroup;
 currentIndex = 0;
 constructor(
  private formBuilder: FormBuilder
 ) {}

 ngOnInit() {    
  this.testForm = this.createTestForm();
  this.initializeArray();
 console.log(this.testForm);

}

createTestForm(): FormGroup {
 return this.formBuilder.group({
   data: this.formBuilder.array([])
 });
}

get data(): FormArray {
 return this.testForm.get('data') as FormArray;
}

initializeArray() {
 for (let index = 0; index < 20; index++) {
   this.addItem();
 }
}

 addItem() {
   this.data.push(this.formBuilder.group({name: [`Name${this.data.length}`]}));
   this.currentIndex = this.data.length;
 }

 }

Answer 2

Это связано с тем, что angular обнаружение изменений будет срабатывать, только если ссылка на объект изменилась. Но добавляя новые элементы, ссылка на ваш массив items.controls остается прежней.

Вы можете создать копию controls array после добавления нового, например:

addOneNew(item = [true, 9999999]){
  const obj = this.createItem(item)
  this.items.push(obj);
  this.items.controls = [...this.items.controls]
  console.log(this.items.value)
}

By При назначении нового массива обнаружение изменений увидит ваши изменения и обновит ваш вид.