Web APIオブジェクトは、POSTを使用してAngular2から送信されるとnullです。

Question

Angular2からASP.NET Web APIエンドポイントにhttpポストを実行してレコードを挿入しようとしています。 Angularではオブジェクトにデータが含まれていますが、エンドポイントに到達するとデータはありません。それはnullです。このコードで私が間違っていることが分かりますか？

角度：角度2でHTTPクライアントを使用している場合

public addBook (body: Object): Observable<Book[]> { 
    let bodyString = JSON.stringify(body); //stringify payload 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    // post request to create new book 
    return this._http.post(this.actionUrl,bodyString,options) 
     .map((res:Response) => res.json()) 
     .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
} 

ASP.NETのWeb API

// POST: api/Books 
    [System.Web.Http.HttpPostAttribute] 
    [HttpOptions] 
    [ResponseType(typeof(Book))] 
    public async Task<IHttpActionResult> PostBook(Book book) 
    { 
    if (!ModelState.IsValid) 
    { 
     return BadRequest(ModelState); 
    } 

    db.Books.Add(book); 
    await db.SaveChangesAsync(); 

    return CreatedAtRoute("DefaultApi", new { id = book.Id }, book); 
    } 

Answer 1

は、最後にそれが動作するようになりました。ここで私が使用したコードだ：

角度：

のWeb APIで

public createService (url: string, param: any): Observable<any> { 
    let body = JSON.stringify(param); 
    let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8'}) 
    let options = new RequestOptions({ headers: headers }); // create a request option 

    // post request to create new book 
    return this._http 
     .post('http://localhost:1234/api/Books/', body, options) 
     .map((res: Response) => res.json()) 
     .catch((error: any) => Observable.throw(error.json().error || 'Server error')); 
} 

ウェブAPI

// POST: api/Books 
    [HttpPost] 
    public async Task<IHttpActionResult> PostBook(Book book) 
    { 
     if (!ModelState.IsValid) 
     { 
      return BadRequest(ModelState); 
     } 

     db.Books.Add(book); 
     await db.SaveChangesAsync(); 

     return CreatedAtRoute("DefaultApi", new { id = book.Id }, book); 
    } 

、WebApiConfig.csは私がRegisterメソッドに次の2行を追加しました：

// port number of client 
var cors = new EnableCorsAttribute("http://localhost:9000", "*", "*"); 
config.EnableCors(cors); 

Web.configに次の行を追加しました：

<httpProtocol> 
    <customHeaders> 
    <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" /> 
    </customHeaders> 
</httpProtocol> 

また、ナゲットパッケージを追加しました。Microsoft.AspNet.WebApi.Cors

Answer 2

がJSON.stringifyが必要とされていない、以下の質問と重複しているようです。

POST from Typescript to Web API API, unable to pass a JSON Object