Question

我想从角度5

调用Web api中的函数

这是我在api.service.ts中的功能：

＆＃13;

//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);
  }

＆＃13;

这是我在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中设置了一个断点，但它没有收到来自angular客户端的任何调用。但是，它适用于＆＃39; get＆＃39;方法

请告诉我为什么功能＆＃39;发布＆＃39;没有工作和解决方案来解决它。

我附上下面的图片。

谢谢！

Answer 1

我认为您遇到的问题与发送的对象和Web API上的预期对象不匹配有关。

您是否尝试过将todo对象传递到正文中而不是将其字符串化？

试试这个

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

请求根本没有订立的另一个原因是你没有订阅它。不要忘记Observables是懒惰的。

查看documentation

Answer 2

无论您何时调用createTodo方法，都要确保您正在订阅。请参阅下面的代码段：

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

Angular 5无法调用方法＆＃39; post＆＃39;在WebApi中

2 个答案: