数组更改后视图不更新答案

【问题标题】：view not updating after array changes数组更改后视图不更新
【发布时间】：2019-12-09 14:49:21
【问题描述】：

我有一个 {any, FormModule} 类型的数组，我遍历它以显示用户列表和表单。在“ngInit()”上，我使用服务获取所有用户并填充列表，然后使用 ngFor 在视图中迭代它。但是当我在数组中删除或添加任何内容时，视图没有得到更新。

这是我的模板文件

<div id="accordion">
    <div class="card" *ngFor="let developer of developersAndTheirForm; index as i" [attr.id]="'developerCard'+developer.developer.id">
        <div class="card-header" [attr.id]="'heading'+i">
        </div>
    </div>
</div>

这个组件.ts

addDeveloper(formData){
    this.loading=true;
    this.adminService.addDeveloper(formData).subscribe(
      (res)=>{
        this.loading=false;
        this.modalService.dismissAll();
        this.developersAndTheirForm.push({
          developer: res,
          form: new FormGroup({
            firstName: new FormControl(res["user"]["firstName"], [Validators.required]),
                lastName: new FormControl(res["user"]["lastName"], ),
                email: new FormControl(res["user"]["email"], [Validators.email]),
                semester: new FormControl(res["semester"]),
                enrollmentNo: new FormControl(res["enrollmentNo"])
          })
        }
        );
      },
      (res)=>{
        this.loading=false;
      }
    )
  }

是的，数组正在填充，只是没有反映在视图中。当我重新加载页面并再次调用 ngInit() 时，我可以看到新添加的元素。

【问题讨论】：

标签： angular data-binding ngfor

【解决方案1】：

对不起，问题不在此代码中。实际上，当我删除一个元素时，我使用的是“document.getElementById("developerCard"+id).remove();" （我知道我是个白痴）。因此，每当我添加一个元素时，我都会先删除该元素，然后再添加它。但是由于“删除代码”的愚蠢，Angular 之后无法添加任何内容。我修复了删除代码，现在它可以正常工作了。

【讨论】：