angular - 响应式表单数组对象已更新，但虚拟滚动列表未在前端更新

Question

复制： https ://stackblitz.com/edit/angular-rf-virtual-scroll

预期行为： 数据应附加在 UI 中的虚拟滚动列表中

实际行为

=> 虚拟滚动列表未更新（前端）=> 反应式表单数组对象已完美更新（以 ts 为单位）

Answer 1

这是因为角度变化检测只有在对象的参考发生变化时才会触发。但是通过添加新元素，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)
}

通过分配一个新数组，更改检测将看到您的更改并更新您的视图。

Answer 2

希望这可以帮助...

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;
 }

 }