Question

我有一个类型为{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>

这是组件。

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（）时，我可以看到y个新添加的元素。

Answer 1

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

阵列更改后视图未更新

1 个答案: