添加新项目后数据未刷新、PrimeNg对话框未关闭问题求助

问题根因 #

你当前的代码仅完成了向后端提交新项目的逻辑，没有在提交成功后同步更新前端用于渲染的项目列表数据，也没有触发对话框关闭操作，前端视图没有收到数据变更信号，所以只有手动刷新页面重新拉取全量数据后才会显示新添加的项目。

修复方案 #

1. 修改add-project-component.ts的addProject方法 #

补充提交成功后的列表更新、对话框关闭、表单重置逻辑，示例代码如下：

addProject(){
    const val ={
      id:this.id,
      projectName:this.projectName,
      clintName:this.clintName,
      initiationDate:this.initiationDate,
      duration:this.duration
    };
    this.projects.addProject(val).subscribe(res=>{
      this.messageService.add({severity:'success', summary:'Service Message', detail:res.toString()});
      // 方案A：直接将新增项目追加到本地渲染用的项目列表，触发视图更新
      // 如果后端接口会返回补全id等字段的完整项目数据，请替换val为接口返回的res对象
      this.projectList.push(val);
      // 方案B：如果不想手动追加，可直接调用你原有的拉取项目列表的方法重新拉取全量数据
      // this.getProjectList()
      
      // 关闭添加对话框，替换为你组件内控制对话框显隐的变量名即可
      this.showAddDialog = false;
      
      // 可选：清空表单字段，方便下次打开添加新内容
      this.resetAddForm();
    });
}

// 新增表单重置方法
resetAddForm() {
  this.id = 0;
  this.projectName = '';
  this.clintName = '';
  this.initiationDate = null;
  this.duration = '';
}

2. 适配特殊场景 #

• 如果你组件的变更检测策略设置为ChangeDetectionStrategy.OnPush，需要在更新完列表后注入ChangeDetectorRef调用this.cdr.detectChanges()手动触发变更检测。
• 如果你项目列表是从父组件传递的@Input属性，可通过@Output自定义事件通知父组件更新列表数据。

内容的提问来源于stack exchange，提问作者user16753483