Angular 5無法在WebApi中調用方法“ post”

Question

我想從角度5調用Web API中的函數

這是我在api.service.ts中的函數：

 //it works public getAllTodos() { return this.http .get(API_URL + '/todos/') .map(response => { const todos = response.json(); return todos.map((todo) => new Todo(todo)); }) .catch(this.handleError); } //it doesn't work public createTodo(todo: Todo) { let headers = new Headers({ 'Content-Type': 'application/json' }); //let options = new RequestOptions({ headers: headers }); let payload = JSON.stringify(todo); return this.http //.post(API_URL + '/todos/', JSON.stringify(todo), options) .post(API_URL + '/todos/', payload, {headers: headers}) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } 

這是我在Web Api中的功能：

[HttpGet]
    [Route("todos")]
    public HttpResponseMessage GetAllTodos()
    {
        try
        {                
            List<Todo> todos = manager.GetAll().ToList();
            return Request.CreateResponse(HttpStatusCode.OK, todos);
        }
        catch (Exception ex)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex.Message);
        }
    }

    [HttpPost]
    [Route("todos")]
    public HttpResponseMessage CreateTodo([FromBody] Todo todo)
    {
        try
        {
            Todo td = new Todo() { title = todo.title, complete = todo.complete };
            int id = manager.CreateTodo(td);
            return Request.CreateResponse(HttpStatusCode.OK, id);
        }
        catch (Exception ex)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex.Message);
        }
    }

我在Web API中設置了一個斷點，但它沒有收到來自Angle Client的任何調用。 但是，它適用於“獲取”方法。

請告訴我為什么功能“ post”不起作用以及解決方案。

我附上下面的圖片。

謝謝！

Answer 1

我相信您面臨的問題與Web API上已發送對象和預期對象的不匹配有關。

您是否嘗試過將todo對象傳遞到體內而不是將其字符串化？

嘗試這個

post(API_URL + '/todos/', todo, {headers: headers})

根本不發出請求的另一個原因是您不訂閱它。 不要忘記Observables是懶惰的。

看一下文檔

Answer 2

無論您在哪里調用createTodo方法，請確保您正在訂閱。 請參閱下面的代碼段：

this._service.createTodo(todoobject).subscribe(success=>{},error=>{});