Angular 5无法调用WebApi的post方法问题求助

看你提供的代码，createTodo函数明显没写完，而且在请求体处理、请求配置上可能存在问题，我帮你完善并修复成可正常运行的版本：

修复后的完整代码 #

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Todo } from './todo.model'; // 确保导入你的Todo模型类

const API_URL = '你的API基础地址'; // 替换成实际的API根路径

@Injectable()
export class ApiService {
  constructor(private http: Http) { }

  // 你原本可正常运行的getAllTodos
  public getAllTodos(): Observable<Todo[]> {
    return this.http
      .get(API_URL + '/todos/')
      .map(response => {
        const todos = response.json();
        return todos.map((todo) => new Todo(todo));
      })
      .catch(this.handleError);
  }

  // 修复后的createTodo函数
  public createTodo(todo: Todo): Observable<Todo> {
    // 配置请求头，指定内容类型为JSON
    const headers = new Headers({ 'Content-Type': 'application/json' });
    // 将Todo对象序列化为JSON字符串作为请求体
    const payload = JSON.stringify(todo);

    return this.http
      .post(API_URL + '/todos/', payload, { headers: headers })
      .map(response => {
        // 将返回的响应数据转为Todo实例，和get接口保持一致的处理逻辑
        const createdTodo = response.json();
        return new Todo(createdTodo);
      })
      .catch(this.handleError);
  }

  // 统一的错误处理函数
  private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

关键修复点说明 #

• 补全请求体处理：你之前的JSON.stringi...是未完成的代码，必须用JSON.stringify(todo)把Todo对象转成JSON字符串，才能匹配application/json的请求头要求。
• 正确调用post方法：Angular 5的Http.post参数顺序是url, 请求体, 配置选项，这里把headers放在配置对象里传递。
• 响应映射对齐：和getAllTodos保持一致，把接口返回的JSON数据转成Todo实例，方便组件直接使用。
• 统一错误处理：复用已有的handleError函数，保证所有请求的错误处理逻辑一致。

额外注意事项 #

确保你的Todo模型类有正确的构造函数，能接收JSON数据初始化属性，比如：

export class Todo {
  id: number;
  title: string;
  completed: boolean;

  constructor(todoData: any) {
    this.id = todoData.id;
    this.title = todoData.title;
    this.completed = todoData.completed;
  }
}

另外要确认你的WebApi的/todos/ POST接口确实接受JSON格式的请求体，并且会返回创建完成的Todo数据。

内容的提问来源于stack exchange，提问作者anhtv13