http.post在Angular 5中不起作用

Question

我正在Angular 5中开发一个应用。

http.get服务在这里工作正常，但在http.post中遇到问题。

下面是我的代码：

GetEmployee() {
    //Data needs to be grouped in an object array as payload
    var payload = { "StaffCode": this.employeeCode };
    this.showLoader = true;
    this.http.post<StaffInfo>(this.baseURL + 'api/StaffDetail/GetEmployee', JSON.stringify(payload)).subscribe(result => {
        this.Staff = result;
        this.showLoader = false;
    }, error => console.error(error));
}

.net核心中的API：

 [HttpPost("[action]")]
    public Employee GetEmployee(string StaffCode)
    {
        return util.GetEmployee(StaffCode);
    }

我在点击按钮时调用它

<button type="button" (click)="GetEmployee()" class="btn btn-sm btn-warning">Get Detail</button>

但在我的API中为空。

我以错误的方式调用post API吗？

还有一件事，如果我在参数签名之前添加[FromBody]，甚至没有击中API。

Answer 1

客户端正在发送复杂的对象模型，但操作需要简单的字符串。

创建模型以匹配客户端的有效负载。

public class GetEmployeeModel {
    public string StaffCode { get; set; }
}

更新操作以期望帖子正文中的有效载荷。

[HttpPost("[action]")]
public Employee GetEmployee([Frombody]GetEmployeeModel model) {
    return util.GetEmployee(model.StaffCode);
}

还要确保有效负载在客户端上正确构造并以正确的内容类型发送

var payload = { StaffCode: this.employeeCode };
var json = JSON.stringify(payload);
var url = this.baseURL + 'api/StaffDetail/GetEmployee';
const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type':  'application/json'
    })
};
this.http.post<StaffInfo>(url, json, httpOptions).subscribe(result => {
    this.Staff = result;
    this.showLoader = false;
}, error => console.error(error));

现在，理想情况下，给定操作的名称和预期的功能，您最好将操作重构为通过路由中的代码传递的HTTP GET请求

[HttpGet("[action]/{StaffCode}")]
public Employee GetEmployee(string StaffCode)
{
    return util.GetEmployee(StaffCode);
}

并相应地更新客户端以向其发送请求

var url = this.baseURL + 'api/StaffDetail/GetEmployee/' + this.employeeCode;
this.http.get<StaffInfo>(url).subscribe(result => {
    this.Staff = result;
    this.showLoader = false;
}, error => console.error(error));