Question

我有一个Angular应用程序，该应用程序由表单和提交按钮组成。填写并提交表单后，如果数据库注入操作成功，则希望它在清除表单后立即返回成功消息。为此，我使用了subscribe方法，但是，代码永远不会进入该方法内部，并且不会触发所需的功能。

insertRecord(form : NgForm){
    this.service.postAsset(form.value).subscribe(res =>{
    this.toastr.success('Inserted succesfull', 'Asset Register');
    this.resetForm(form);
    });
  }

postAsset方法成功运行，并且该值已添加到数据库表中，但是subscribe方法从未运行。究竟是什么原因引起的？任何帮助表示赞赏。

编辑：根据要求，实施postAsset()；

postAsset(formData: Asset){
    return this.http.post(this.rootURL + '/Create', formData);
  }

编辑2：：提交表单几秒钟后发生错误；

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:13804:51)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2781:31)
    at Object.onInvokeTask (http://localhost:4200/vendor.js:59285:33)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2780:60)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2553:47)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2856:34)
    at invokeTask (http://localhost:4200/polyfills.js:4102:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4139:21)

Answer 1

请尝试在您的HttpClient POST请求中添加{responseType: 'text'}选项：

postAsset(formData: Asset) {
  return this.http.post(this.rootURL + '/Create', formData, { responseType: 'text' });
}

在HttpClient文档的Requesting non-JSON data下对此进行了提及。

您的请求似乎正在发生的事情是服务器返回的不是类型application/json。除非您指定其他类型，否则HttpClient默认情况下会尝试在幕后有效进行JSON.parse()。尝试对非JSON字符串执行JSON.parse()会导致您遇到错误。

如果可能的话，我建议始终从服务器返回application/json的类型，以避免这样做。

希望有帮助！

Answer 2

您可以尝试如下更改代码：

postAsset(formData: Asset){
    return this.http.post(this.rootURL + '/Create', formData)
        .pipe(
            map((response: any)
                return response;
            )
        );
  }

在顶行下方添加

import { map } from 'rxjs/operators';

订阅方法未触发

2 个答案: