发布到Asp.Net Core收到空对象

Question

I'm making a POST request from my Angular 7 application to a AspNet Core backend server. However when receiving the model, it's null.

I'm testing using Postman, and it works when using Postman. But it's not working when sending from the client app.

Here is my controller and controller base:

public class BaseController : ControllerBase {
    public readonly ILogger _logger;
}

[Route("api/[controller]")]
public class ExperienceController : BaseController {
    [HttpPost, Route("Create")]
    public async Task<IActionResult> Create([FromBody] Experience experience){
      // code ommited
    }
}

Here my service.ts code

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
// some code omitted

saveExperience(experience: Experience): Observable<Experience> {
  let url = `${this.baseUrl}/Experience/Create`;
  return this.http.post<Experience>(url, experience, httpOptions).pipe(
    tap((newExp: Experience) => this.log(`Created experience ${newExp}`)),
    catchError(this.handleError<Experience>('saveExperience'))
  );
}

The object being sent from my client app is using camel-case properties, and the model for the backend is using pascal-case. In Postman this is not affecting anything, but just in case.

I'm really confused on why when calling from Postman it's working. But every test from the client, I'm receiving a null object.

EDIT #1 I removed all fields from my Experience class and used only name and description and it worked, I just found that I'm getting this issue if I have a complex property. I have added a default constructor, initializing the property but still getting the same issue. Please note that I'm getting this issue only when using the Angular app, if I use Postman it's working

public class Experience : ExperienceBase {
    public string Name { get; set; }
    public string Description { get; set; }

    // this guy here is causing the issue
    public LocationDetails LocationDetails { get; set; } 

}

Thanks in advance

Answer 1

First you dont need to set the HttpHeader to application/json so you remove the HttpHeader so your code would be like this

saveExperience(experience: Experience): Observable<Experience> {
  let url = `${this.baseUrl}/Experience/Create`;
  return this.http.post<Experience>(url, experience).pipe(
    tap((newExp: Experience) => this.log(`Created experience ${newExp}`)),
    catchError(this.handleError<Experience>('saveExperience'))
  );
}

Please let me know if you still have any problem