Question

我有这样的代码：

传递数组对象的空值。记录细节时，它显示正常。

投诉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));

        }
    }

传递空值。附加屏幕

Answer 1

首先，我想指出，您发送的内容和控制台日志记录的内容并不相同。实际上你正在记录后端发送给你的是什么，而不是它收到的内容，所以你的帖子请求实际上可能正在发送数据，它只是“错误的格式”。

查看您的控制台，问题似乎是您发送带有驼峰情况的属性，但后端希望您使用较低的驼峰情况。

Answer 2

您没有将输入元素绑定到ngModel。添加绑定到输入控件，如

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

当您提交表单时，complaintObj不应为空。

无法在Http POST方法中传递数组值

2 个答案: