如何在 angular/cli 中使用 http.post？答案

【问题标题】：How to use http.post in angular/cli?如何在 angular/cli 中使用 http.post？
【发布时间】：2020-11-26 17:32:36
【问题描述】：

我是 Angular 新手，在尝试从 Angular 项目向 Web api 发布字符串时，Web api Post 方法中的参数始终为 null。如果我使用 [FromBody]，则 post 方法本身不会被调用。如果我从 Post 方法中删除了 [FromBody]。该方法被调用，但参数的值为 null。任何人都可以在这里帮助我！！

SendTODB(db:Event)
{
  
  this.http.post('https://localhost:44301/Student',this.inpuctstexts).subscribe((data)=>(<HTMLInputElement>db.target).value);
}

在我的 WebApi 中：

[ApiController]
    [Route("[controller]")]
    public class StudentController : ControllerBase
    {
        [HttpGet]
        public ActionResult<List<Student>> StudentList()
        {
            List<Student> student = new List<Student>();
            student.Add(new Student() { StudentName = "Mike", Marks = "200" });
            student.Add(new Student() { StudentName = "Jack", Marks = "250" });
            student.Add(new Student() { StudentName = "Jacob", Marks = "300" });
            student.Add(new Student() { StudentName = "John", Marks = "500" });
            return (student);

        }

        [HttpPost]
        public ActionResult<string> student(string input)
        {
            return input;
        }
    }

This is my angular code

This is my WebApi Controller class

【问题讨论】：

调用本身似乎是时间，在调用此行之前检查正文是否为空。
邮政编码此处为格式化文本。不通过图片或第三方服务链接。
变量（this.inpuctstexts）不为空。我已经使用 console.log(this.inpuctstexts) 进行了检查。
请确保您的 :this.inpuctstexts 与您的 [Frombody] Myclass myclass 是同一个对象。如果您的 inpuctstexts 只是一个字符串，请将其包装在一个对象中
嗨@crashmstr ..我已经在格式化文本中添加了代码

标签： angular typescript http webapi

【解决方案1】：

HttpClient 可能默认使用 application/json 作为内容类型，因此请尝试将有效负载包装在两端的对象中。

【讨论】：

嗨 Mohamed ..我用过 json.Stringify(this..inpuctstexts)。但是无效。post 方法中的参数为 null

【解决方案2】：

这就是 formbody 的作用：

当参数有 [FromBody] 时，Web API 使用 Content-Type 标头来选择格式化程序。在此示例中，内容类型是“application/json”，请求正文是原始 JSON 字符串（不是 JSON 对象）。消息体最多允许读取一个参数。

请检查这个答案：

FromBody string parameter is giving null

【讨论】：

嗨..我已经尝试过这种方法，但它不起作用

【解决方案3】：

我认为您需要设置标题，并且 API 将需要 [FromBody]。将您的服务代码更改为

SendTODB(db:Event)
{
   const header = {
 'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Access-Control-Allow-Headers': 'Content-Type',
    }
    
   const headerOptions = {                                                                                                                                                                                 
     headers: new Headers(header), 
   };
    
   const data = JSON.stringify(inpuctstexts);

   return this.http.post(https://localhost:44301/Student, data, headerOptions)
          .subscribe((data)=> {
                  // your code will go here
               }) ;
}

如果它不起作用，那么在你的 api 中创建一个模型

    class RequrestModel{
    
    public string input {get;set;}
    }


 [HttpPost]
        public ActionResult<string> student([FromBody]RequestModel request)
        {
            return request.input;
        }

从你的前端

SendTODB(db:Event)
    {
           const header = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Headers': 'Content-Type',
        }
        
       const headerOptions = {                                                                                                                                                                                 
         headers: new Headers(header), 
       };

      const dataModel = {
       input = inpuctstexts;
       }
        
       const data = JSON.stringify(dataModel);
    
       return this.http.post(https://localhost:44301/Student, data, headerOptions)
              .subscribe((data)=> {
                      // your code will go here
                   }) ;
    }

会有用的

【讨论】：

HI ...我已经使用了上面的代码。但它仍然无法正常工作。抛出此错误'POST localhost:44301/Student415'
ERROR HttpErrorResponse {headers: HttpHeaders, status: 415, statusText: "OK", url: "localhost:44301/Student", ok: false, …}
能否更新一下标题，我刚刚更新了代码
嗨...我已经尝试了更新的代码。但仍然无法正常工作
能否请您以简单的示例说明如何通过 http.post() 将字符串发布到 webapi 发布方法。