post form data angular 4

Question

我想在我的應用程序中使用角度4創建一個新用戶。我使用表單添加一個新用戶。我現在可以把他加不API現在我想使用的API，所以我想送這個形式API

當點擊進入所需的數據功能後可以節省形式：

employes: Employees[]=[ 
    // new Employees('aya','test','aya@test.com',45656,true,false) 
]; 

onEmployeeSave(employee: Employees){ 

    let newEmployee = { 
    name: employee.name, 
    job: employee.job, 
    email: employee.email, 
    mob: employee.mob, 
    isActive: employee.isActive, 
    isMember: employee.isMember 
} 
this.dataStorageService.storeEmployee(newEmployee);   
this.employes.push(newEmployee); 
this.addEmployeeForm.reset(); 
this.modalRef.close(); 
} 

，這就是數據storage.service .TS：

getEmployees(): Observable<any>{ 
    return this.http.get('http://api.###.com/api/Employees/getEmployees'); 
    } 
    storeEmployee(employes: Employees){ 
    return this.http.post('http://###.com/api/employees/PostEmployee?empId=1&name='+name+'&job='+job+'&email='+email+'&isActive='+isActive+'&mobile='+mob+'&councilMember='+isMember+'&jobId=1', employes); 
} 

employees.component.html：

 <!-- pop up body --> 
      <div class="modal-body" > 
      <form [formGroup]="addEmployeeForm" (ngSubmit)="onSubmit(f)" #f="ngForm"> 
      <div class="row"> 
      <div class="form-group" class="col-lg-12"> 
       <ul class="flex-outer"> 
       <li> 
       <label for="first-name"> name </label> 
        <input type="text" ngModel name="name" formControlName="name"> 
       </li> 
       <li> 
       <label for="job"> job</label> 
        <select ngModel name="job" formControlName="job" required > 
        <option *ngFor="let job of jobs" [value]="job.name"> {{ job.name }} </option> 
        </select> 
        </li> 
        <li> 
        <label for="email">email</label> 
        <input type="email" ngModel name="email" formControlName="email" > 
        </li> 
        <li> 
         <label for="mobile"> mob </label> 
         <input type="number" ngModel name="mob" formControlName="mob"> 
        </li> 
        <li> 
         <label for="check"> active</label> 
         <div class="form-check"> 
         <label class="form-check-label"> 
         <input type="checkbox" class="form-check-input" ngModel name="isActive" formControlName="isActive"> 
         </label> 
        </div> 
        </li> 
        <li> 
         <label for="check">member </label> 
         <div class="form-check"> 
          <label class="form-check-label"> 
          <input type="checkbox" class="form-check-input" ngModel name="isMember" formControlName="isMember"> 
          </label> 
         </div> 
         </li> 
         </ul> 
         </div> 

     <button type="submit" class="btn btn-success" (click)="onEmployeeSave(addEmployeeForm.value)"> حفظ </button> 

           </form> 
          </div> 
         </div> 


      <div style="overflow-x:auto;"> 
       <table class="table table-hover table-condensed text-center"> 
        <thead> 
         <tr> 
          <th> name </th> 
          <th> job </th> 
          <th> email </th> 
          <th> mob </th> 
          <th> member </th> 
          <th> active </th> 
          <th> edit</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr *ngFor="let employee of employes"> 
          <td> {{employee.Emp_Name}} </td> 
          <td> {{employee.Job}} </td> 
          <td> {{employee.Email}} </td> 
          <td> {{employee.Mobile}} </td> 
          <td> {{employee.Is_Active}} </td> 
          <td> {{employee.Council_Member}} </td> 
          <td> 

          </td> 
         </tr> 
        </tbody> 
       </table> 

我有一個錯誤：」 t找到名字'mob'，找不到名字'job'， 找不到名字'email'，找不到名字'isMember'，找不到名字'isActive'

有什麼幫助嗎？

Answer 1

修改您的storeEmployee方法：

storeEmployee(employes: Employees){ 
    return this.http.post('http://###.com/api/employees/PostEmployee?empId=1&name='+employes.name+'&job='+employes.job+'&email='+employes.email+'&isActive='+employes.isActive+'&mobile='+employes.mob+'&councilMember='+employes.isMember+'&jobId=1', employes); 
} 

試試這個從服務器檢查響應：

storeEmployee(employes: Employees){ 
    let url = 'http://###.com/api/employees/PostEmployee?empId=1&name='+employes.name+'&job='+employes.job+'&email='+employes.email+'&isActive='+employes.isActive+'&mobile='+employes.mob+'&councilMember='+employes.isMember+'&jobId=1'; 
    let headers = new Headers({ 'Content-Type': 'text/plain' }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post(url, JSON.stringify(employes), options) 
     .map((res: Response) => res.json()) 
     .subscribe(
      data => { 
       console.log(data); 
       return true; 
      }, 
      error => { 
       console.log(error); 
       console.error("Error saving employes!"); 
       return false; 
      } 
    ); 
}