对象更新，但在前端没有更新虚拟滚动列表

Question

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

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

实际行为

=>虚拟滚动列表未更新(前端) =>反应性表单数组对象完全更新(T)

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

 }