发送POST请求 - angular4

时间:2017-08-09 13:52:55

标签: javascript html angular typescript

我将使用angular 4向django后端api提交表单,但是当我单击“保存”按钮时没有任何动作发生。我监视后端,没有任何传入的请求我无法弄清楚我的代码出错的地方,遵循我的代码:

addEmployee.component.ts:

import { Employee } from './../employee';
import { AddEmployeeService } from './add-employee.service';
import { Component, OnInit } from '@angular/core';
import { DataService } from './../../services/data.service';

@Component({
  selector: 'app-addemployee',
  templateUrl: './addemployee.component.html',
  styleUrls: ['./addemployee.component.css']
})
export class AddemployeeComponent implements OnInit {
    jobs: Array<any>;
    mahalyas: Array<any>;
    courses: Array<any>;
    employee: Array<any>;
  constructor(private dataService: DataService, private AddEmployeeService: AddEmployeeService) { }

  ngOnInit() {
      this.dataService.getAllMahaleyahs().subscribe(
        data => this.mahalyas = data
      );
      this.dataService.getAllCourses().subscribe(
        data => this.courses = data

      );
      this.dataService.getAllJobs().subscribe(
        data => this.jobs = data
      );
  }
  onSave(){
    this.dataService.saveEmployee(this.employee);
  }

}

Employee.ts:

export class Employee
{
   constructor
   ( 
    public id: number,
    public name: string,
    public grade: string,
    public maritial_status: string,  
    public number_of_children: string,
    public spouse_work_place: string,
    public parent_status: string,
    public helth_status: string,
    public date_of_transfer_to_mahaleyah: string,
    public address: string,
    public mobile_number: string,
    public employment_type: string,
    public qualification: string,
    public extra_qualification: string,
    public note: string, 
    public job: string,
    public previouse_mahaleyah: string,
    public courses: string){}

}

addEmployee.component.html:

<div class="main-content">
   <div class="row">
      <div class="col-sm-8 col-xs-offset-2">
         <div class="panel panel-default">
            <div class="panel-heading clearfix">
               <h4><strong> إضافة موظف</strong></h4>
            </div>
            <div class="panel-body">
               <form  class="form-inline" ng-submit="onSave()">
                  <div class="list-group">
                     <div class="list-group-item">
                        <label class="list-group-item-text bottom-up">الإسم:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" class="form-group form-control" name="name" size="40">
                     </div>
                     <div class="list-group-item">
                        <label class="list-group-item-text bottom-up">نوع التعيين:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <select class="form-group form-control" name="employment_type">
                           <option value="معين">معين</option>
                           <option value="متعاون">متعاون</option>
                        </select>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <label class="list-group-item-text bottom-up">الحالة الإجتماعية:</label>
                        &nbsp;
                        <select class="form-control" name="maritial_status">
                           <option value="متزوج">متزوج</option>
                           <option value="اعزب">اعزب</option>
                           <option value="مطلق">مطلق</option>
                           <option value="ارمل">ارمل</option>
                        </select>
                        &nbsp;&nbsp;&nbsp;
                        <label class="list-group-item-text bottom-up">الوظيفة:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <select class="form-control" name="job">
                           <option *ngFor="let job of jobs" value="{{job.value}}">{{job.name}}</option>
                        </select>
                     </div>
                     <div class="list-group-item">
                        <label class="list-group-item-text bottom-up">المؤهل:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input name="qualification" class="form-control" type="text">
                        &nbsp;&nbsp;
                        <label class="list-group-item-text bottom-up">المؤهل الإضافي:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input name="extra_qualification" class="form-control" type="text">
                     </div>
                     <div class="list-group-item">
                        <label class="list-group-item-text bottom-up">العنوان:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input name="address" class="form-control" type="text">
                        &nbsp;&nbsp;&nbsp;
                        <label class="list-group-item-text bottom-up">المحلية السابقة:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                        <select class="form-control" name="previouse_mahaleyah">
                           <option *ngFor="let mahaleyah of mahalyas" value="{{mahaleyah.id}}">{{mahaleyah.name}}</option>
                        </select>
                     </div>
                     <div class="list-group-item">
                        <label class="list-group-item-text bottom-up">تاريخ النقل للمحلية:</label>
                        <input type="text" class="form-control" placeholder="mm/dd/yyyy" name="date_of_transfer_to_mahaleyah">
                        &nbsp;&nbsp;&nbsp;
                        <label class="list-group-item-text bottom-up">الحالة الصحية:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" class="form-control" name="health_status">
                     </div>
                     <div class="list-group-item">
                        <label class="list-group-item-text bottom-up">عدد الأطفال:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" class="form-control" name="number_of_children">
                        &nbsp;&nbsp;
                        <label class="list-group-item-text bottom-up">مكان عمل الزوج:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" class="form-control" name="spouse_work_place">
                     </div>
                     <div class="list-group-item">
                        <label class="list-group-item-text bottom-up">رقم الهاتف:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" class="form-control">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <label class="list-group-item-text bottom-up">الدورات: </label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <select class="form-control" name="courses">
                           <option *ngFor="let course of courses" value="{{course.id}}">{{course.name}}</option>
                        </select>
                     </div>
                     <div class="list-group-item">
                        <label class="list-group-item-text bottom-up">حالة الوالدين:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <textarea type="text" class="form-control" name="parent_status"></textarea>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <label class="list-group-item-text bottom-up">ملاحظات:</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <textarea type="text" class="form-control" name="note"></textarea>
                     </div>
                  </div>
                  <div class="new-employee-butons">
                     <input type="submit" class="btn btn-md btn-success"  value="save" (click)="onSave()">
                     <button class="btn btn-md btn-danger ">
                     close
                     </button>
                  </div>
               </form>
            </div>
         </div>
         <!-- End of Pnel -->
      </div>
   </div>
</div>

data.service.ts:

import { Injectable, Input } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Kg } from '../kgs/kg';


import 'rxjs/add/operator/map';

@Injectable()
export class DataService {

  baseUrl: string = 'http://localhost:8000/kgms/';
  constructor(private http: Http) { }

/* Getters  starts*/
  public getAllEmployees(){
    return this.http.get(this.baseUrl+'employees/')
      .map(res => res.json());
  }

  public getAllKgs(){
    return this.http.get(this.baseUrl+'kgs/')
      .map(res => res.json());
  }

  public getAllStudents(){
    return this.http.get(this.baseUrl+'students/')
      .map(res => res.json());
  }

  public getAllAssessments(){
    return this.http.get(this.baseUrl+'asses/')
      .map(res => res.json());
  }

  public getAllMahaleyahs(){
    return this.http.get(this.baseUrl+'mahaleyahs/')
      .map(res => res.json());
  }

  public getAllCourses(){
    return this.http.get(this.baseUrl+'courses/')
      .map(res => res.json());
  }
  public getAllJobs(){
    return this.http.get(this.baseUrl+'jobs/')
      .map(res => res.json());
  }

/* Getters Ends */

/* Setters starts  */

  saveEmployee(employee){
    const headers = new Headers({'Content-type': 'application/json'});
    return this.http.post('http://localhost:8000/kgms/', employee, {headers: headers});
  }



public addKg(kg:Kg){

  return this.http.put(this.baseUrl+'kgs/', kg, { 
    })
    .map(res =>  res.json());  
}

/* Setters Ends */






}

我感谢任何帮助和建议

0 个答案:

没有答案