2017-05-14 102 views
2

我有這樣的代碼:無法通過Http POST方法中的數組值

空值傳遞數組對象。 當記錄細節時,它顯示正常。

投訴reg.component.html

<div class="col-md-6 panel panel-default"> 
    <h2>Complaint registration</h2> 
    <form #complaintRegForm="ngForm" (ngSubmit)="createComplaint(complaintRegForm.value)"> 
    <div class="form-group"> 
     <label>District:</label> 
     <input type="text" class="form-control" name="District" ngModel> 
    </div> 
    <div class="form-group"> 
     <label>Subject:</label> 
     <input type="text" class="form-control" name="Subject" ngModel> 
    </div> 
    <div class="form-group"> 
     <label>Description:</label> 
     <input type="text" class="form-control" name="Description" ngModel> 
    </div> 
    <div class="form-group"> 
     <label>Place of occurence:</label> 
     <input type="text" class="form-control" name="PlaceOfOccurence" ngModel> 
    </div> 
    <div class="form-group"> 
     <label>Name:</label> 
     <input type="text" class="form-control" name="Name" ngModel> 
    </div> 
    <div class="form-group"> 
     <label>Gender:</label> 
     <input type="radio" class="form-control" name="Male" ngModel>Male 
     <input type="radio" class="form-control" name="Female" ngModel>Female 
    </div> 
    <div class="form-group"> 
     <label>Address:</label> 
     <input type="text" class="form-control" name="Address" ngModel> 
    </div> 
    <div class="form-group"> 
     <label>Mobile no:</label> 
     <input type="number" class="form-control" name="MobileNo" ngModel> 
    </div> 
    <div class="form-group"> 
     <label>Email:</label> 
     <input type="text" class="form-control" name="Email" ngModel> 
    </div> 
    <div class="form-group"> 
     <label>Date of occurence:</label> 
     <input type="text" class="form-control" name="DateOfOccurence" ngModel> 
    </div> 
    <button type="submit" class="btn btn-primary">Submit</button> 
    </form> 
</div> 

投訴reg.component.ts

import { Component, OnInit } from '@angular/core'; 

import { ComplaintRegistrationService } from './complaint-registration.service'; 

@Component({ 
    selector: 'app-complaint-registartion', 
    templateUrl: './complaint-registartion.component.html', 
    styleUrls: ['./complaint-registartion.component.css'], 
    providers:[ComplaintRegistrationService] 
}) 
export class ComplaintRegistartionComponent implements OnInit { 

    constructor(private complaintCreation : ComplaintRegistrationService) { } 

    ngOnInit() { 
    } 

    complaintObj = {}; 
    createComplaint(Obj){ 
    console.log(Obj); 
    this.complaintCreation.createCompliants(Obj).subscribe(); 
    } 

} 

和 投訴reg.service.ts

import { Injectable } from '@angular/core'; 
import { Http,Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 



@Injectable() 

    export class ComplaintRegistrationService{ 
     private _url:string ="http://192.168.0.106:8000/app/complaint/create" 
     constructor(private _http:Http){} 
     createCompliants(complaintObj){ 
      return this._http.post(this._url,complaintObj).map((response:Response)=>console.log(response)); 

     } 
    } 

傳遞空值。附加屏幕

enter image description here

+1

您正在記錄響應,而不是請求,那麼您在後端實際收到了什麼?這似乎是屬性不匹配。你必須記住這是區分大小寫的,例如'District'與'District'不一樣 – Alex

+0

@ AJT_82謝謝。我會嘗試 – Ajay

+0

@ AJT_82謝謝Bro.it工作了很多 – Ajay

回答

0

你沒有綁定輸入元素的ngModel。添加綁定到這樣的輸入控件

<input type="text" class="form-control" name="District" [(ngModel)]="complaintObj.district" > 

當您提交表格complaintObj不應該是空的。

1

首先,我想指出的是,您發送的內容和控制檯日誌記錄的內容並不相同。實際上,你記錄的是後端發送給你的內容,而不是它收到的內容,所以你的發佈請求實際上可能是發送數據,它只是「錯誤的格式」。

看着你的控制檯,似乎問題在於你發送的是上駱駝案例的屬性,但後端希望你使用較低的駱駝案例。