AngularCli问题：向mockApi新增对象的POST请求无效，API无变化

兄弟，我之前也碰到过类似的情况——POST请求看起来发出去了，但Mock API的数据就是没更新，大概率是这几个环节出了问题，咱们一步步捋：

先看Mock API本身的特性 #

很多Mock工具（比如常用的json-server）是基于本地文件存储的，要是请求没触发正确的文件写入，数据自然不会持久化：

• 先确认请求URL完全匹配Mock API的配置，比如你要添加设备，是不是该POST到/devices而不是/device或者其他路径？
• 检查Mock服务的启动参数，比如json-server有没有加--watch？没加的话，即使请求成功，修改也不会实时同步到db.json，得重启服务才看得见；
• 有些Mock API是纯内存级别的，重启服务后数据就会重置，要是你是重启后看不到新增的数据，那属于正常现象，这类Mock本身就不支持持久化。

再检查Angular代码的问题 #

这部分是最容易踩坑的，尤其是Observable的特性：

• 一定要订阅Observable！ HttpClient的post方法返回的是冷Observable，你只调用this.http.post(...)但不调用.subscribe()的话，请求根本不会发出去！比如正确的写法应该是：

  constructor(private http: HttpClient) {}
  
  addToApi(formData: any) {
    // 务必订阅，否则请求不会执行
    this.http.post('http://你的MockAPI地址/devices', formData)
      .subscribe({
        next: (res) => console.log('请求成功返回:', res),
        error: (err) => console.error('请求出错:', err)
      });
  }
  

• 打开浏览器的F12，切到Network标签，看看POST请求到底发出去没：
  • 如果看不到请求：要么是没订阅，要么是表单提交的逻辑有问题（比如按钮没加type="submit"，或者表单的(ngSubmit)绑定错了）；
  • 如果请求状态码是4xx/5xx：比如404是URL错了，400是请求体格式不符合Mock API的要求（比如缺必填字段、字段名不匹配）；
• 打印表单数据看看：在addToApi方法里加console.log(formData)，确认传递的参数结构和Mock API要求的一致，比如Mock要求hitInfo字段，你是不是传成了hitinfo（大小写敏感）？

最后检查表单绑定 #

看看模板里的表单控件有没有正确绑定ngModel：比如每个输入框是不是加了[(ngModel)]="xxx"，并且有name属性？比如：

<input type="text" id="hitInfo" name="hitInfo" [(ngModel)]="formData.hitInfo" class="form-control">

要是控件没正确绑定，devicemgForm.value可能是空对象或者缺少字段，导致Mock API忽略这个请求。

按上面的步骤排查下来，基本就能找到问题所在了，要是还有疑问，把控制台的错误信息或者完整的addToApi方法代码贴出来，咱们再细化分析~

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