HTTP POST請求失敗，響應爲角度2中的空值，使用打字稿

Question

我正在使用Angular 2技術，在我當前的一個項目中，我遇到了使用打字稿代碼的HTTTP POST請求中的問題。

這是我在myservice.ts

postVehicleInfoRestful(vehicleInfo: VehicleInfoTable): Observable<VehicleInfoTable> { 

    console.log('VehicleInfo Service.') 

    //let body = JSON.stringify(vehicleInfo ? vehicleInfo : null); 
    let body = JSON.stringify(vehicleInfo); 
    console.log(body); 

    let headers = new Headers({ 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }); //'application/x-www-form-urlencoded' application/json 


    let options = new RequestOptions({ headers: headers });//, method: "post" 

    console.log(this._settingsService.todoListAPIUrl + '/api/VehicleInfoTable'); 

    return this._http.post(this._settingsService.todoListAPIUrl + '/api/VehicleInfoTable', body, options) 
     .map(res => res.json()) 
     .do(data => console.log(JSON.stringify(data))) 
     .catch(this.handleError); 
} 

而且還寫代碼，寫代碼的mycomponenet.ts

ngOnInit(): void { 

    console.log(' VehicleInfoComponent In OnInit'); 

    this.vehicleInfo.ID = 7; 
    this.vehicleInfo.AssetType = 'Auto'; 
    this.vehicleInfo.IntendedUse = 'Personal'; 
    this.vehicleInfo.NeworUsed = 'New'; 
    this.vehicleInfo.SSN = '123456789'; 
    this.vehicleInfo.VehicleYear = '1'; 
    this.vehicleInfo.VehicleMake = '2'; 
    this.vehicleInfo.VehicleModel = '3'; 
    this.vehicleInfo.VIN = 'US123'; 
    this.vehicleInfo.CurrentMileage = '40';    
} 

saveVehicleInfo() { 

    console.log('Save Vehicle Info Details.'); 
    console.log(this.vehicleInfo); 

    this._vehicleInfoService.postVehicleInfoRestful(this.vehicleInfo).subscribe(//call the post 
     data => this.postVehicleInfoToServer = JSON.stringify(data),// put the data returned from the server in our variable 
     error => console.log("Error HTTP Post Service"),// in case of failure show this message 
     () => console.log("Job Done Post !")); //run this code in all cases 

} 

這是我在寫的代碼mycontroller.cs

public async Task Post(VehicleInfoTable vehicleInfo) 
    { 
     try 
     { 
      //owner = ((ClaimsIdentity)User.Identity).FindFirst(ClaimTypes.NameIdentifier).Value; 

      using (var client = NewDataAPIClient()) 
      { 
       await client.VehicleInfoTables.PostVehicleInfoTableByVehicleinfotableAsync(new VehicleInfoTable 
       { 

        ID = (int)vehicleInfo.ID, 
        AssetType = vehicleInfo.AssetType, 
        IntendedUse = vehicleInfo.IntendedUse, 
        NeworUsed = vehicleInfo.NeworUsed, 
        SSN = vehicleInfo.SSN, 
        VehicleYear = vehicleInfo.VehicleYear, 
        VehicleMake = vehicleInfo.VehicleMake, 
        VehicleModel = vehicleInfo.VehicleModel, 
        VIN = vehicleInfo.VIN, 
        CurrentMileage = vehicleInfo.CurrentMileage 
       }); 
      } 
      System.Diagnostics.Trace.TraceInformation("VehicleInfoTableController in ToDoListAPI"); 
      DevInsights.TrackEvent("VehicleInfoTableController in ToDoListAPI", "Post"); 

     } 
     catch (Exception ex) 
     { 
      DevInsights.TrackException(ex, "VehicleInfoTableController in ToDoListAPI", "Post"); 
      System.Diagnostics.Trace.TraceWarning(ex.Message); 
     } 
    } 

當調試我的代碼，一旦點擊保存按鈕，根據我的帖子的網址，此方法將發射公共異步任務後（VehicleInfoTable vehicleInfo） { ...... } 但在車輛信息參數包含所有字段的值將爲null但是當我提出發佈請求時，我在正文中添加了數據。

可以請你告訴我在http post請求中把數據添加到body中的錯誤。

能否請你告訴我在哪裏，我沒有錯，我怎麼能解決這個問題呢？

-Pradeep

Answer 1

編輯我可以建議兩個選項，您可以嘗試，要麼：

試試這個，使其儘可能先簡單的話，儘量增加更多的移動部件;）

postVehicleInfoRestful(vehicleInfo: VehicleInfoTable) { 
    let body = JSON.stringify(vehicleInfo); 
    let headers = new Headers({ 
    'Content-Type': 'application/json'}); 
    let options = new RequestOptions({ headers: headers }); 
    return this._http.post(this._settingsService.todoListAPIUrl + '/api/VehicleInfoTable', body, options) 
     .map((res: Response) => { console.log('res', res); }) // let's see what we get 
} 

或：

postVehicleInfoRestful(vehicleInfo: VehicleInfoTable) { 
    let body = new URLSearchParams(); 
    // mark all your properties and values below with body.set 
    body.set('yourPropertyName1', vehicleInfo.property1) 
    body.set('yourPropertyName2', vehicleInfo.property2) 
    let headers = new Headers({ 
    'Content-Type': 'application/x-www-form-urlencoded'}); 
    let options = new RequestOptions({ headers: headers }); 
    return this._http.post(this._settingsService.todoListAPIUrl + '/api/VehicleInfoTable', body.toString(), options) 
     .map((res: Response) => { console.log('res', res); }) // let's see what we get 
} 

Answer 2

撥打myservice.ts可觀測map(res => console.log(res.json()))被映射結果鍵入void。改爲改爲map(res => res.json())。 RXJS Observable do(...)方法正是爲此目的而設計的，因爲它不會影響Observable的內容。