Angular13中Ngb Bootstrap模态框PUT失效，编辑触发新增问题

核心问题 #

1. 你的SourcesService仅实现了POST新增接口，缺少PUT更新接口
2. 组件的saveSource方法未区分新增/编辑场景，统一调用POST接口，导致编辑操作也会创建新对象
3. LoadEditData中先执行open()（触发Clearform()清空表单）再加载编辑数据，逻辑顺序存在瑕疵

步骤1：在service.ts中添加PUT更新方法 #

// service.ts
addSource(source: sources): Observable<sources> {
  return this.http.post<sources>(this.API_URL, source).pipe(
    tap(() => {
      this._refreshrequired.next();
    })
  );
}

// 新增PUT更新方法（根据后端API规范调整URL，确保携带对象ID）
updateSource(source: sources): Observable<sources> {
  return this.http.put<sources>(`${this.API_URL}/${source.id}`, source).pipe(
    tap(() => {
      this._refreshrequired.next();
    })
  );
}

步骤2：修改component.ts的saveSource方法，区分新增/编辑逻辑 #

// component.ts
saveSource(){
  if(this.sourceForm.valid){
    const formData = this.sourceForm.getRawValue();
    // 根据ID判断操作类型：ID为0是新增，否则是编辑
    if(formData.id === 0){
      // 新增操作调用POST接口
      this.sourcesService.addSource(formData).subscribe(result => {
        this.saveresponse = result;
        this.errormessage = "保存成功";
        this.errorclass = "sucessmessage";
        setTimeout(()=>{
          this.modalService.dismissAll();
        },1000)
      });
    } else {
      // 编辑操作调用PUT接口
      this.sourcesService.updateSource(formData).subscribe(result => {
        this.saveresponse = result;
        this.errormessage = "更新成功";
        this.errorclass = "sucessmessage";
        setTimeout(()=>{
          this.modalService.dismissAll();
        },1000)
      });
    }
  }else{
    this.errormessage = "请输入有效数据";
    this.errorclass = "errormessage";
  }
}

步骤3：优化LoadEditData逻辑，避免清空表单覆盖编辑数据 #

调整操作顺序，先加载编辑数据再打开模态框，避免不必要的表单清空：

// component.ts
LoadEditData(source: any) {
  this.sourcesService.GetSourcebyid(source).subscribe(result => {
    this.editdata = result;
    // 先填充表单数据，再打开模态框
    this.sourceForm.setValue({id:this.editdata.id, name:this.editdata.name,url:this.editdata.url});
    this.openEditModal();
  });
}

// 新增编辑专用模态框打开方法（不清空表单）
openEditModal() {
  this.modalService.open(this.addview,{ ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
  }, (reason) => {
  });
}

// 保留原open方法给新增操作
open() {
  this.Clearform();
  this.modalService.open(this.addview,{ ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
  }, (reason) => {
  });
}

可选优化：区分模态框标题（新增/编辑） #

在component.ts中添加标题变量：

// component.ts
modalTitle = "数据源表单";

// 新增操作时设置标题
open() {
  this.modalTitle = "新增数据源";
  this.Clearform();
  this.modalService.open(this.addview,{ ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
  }, (reason) => {
  });
}

// 编辑操作时设置标题
openEditModal() {
  this.modalTitle = "编辑数据源";
  this.modalService.open(this.addview,{ ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
  }, (reason) => {
  });
}

修改component.html中的标题标签：

<h4 class="modal-title" id="modal-basic-title">{{modalTitle}}</h4>

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