Angular post表单数据表4

我想使用angular 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();
}

这就是data-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>

我有一个错误：找不到名称“mob”，找不到名称“job”， 找不到名称“电子邮件”，找不到名称“isMember”，找不到名称“isActive”

---

有什么帮助吗？

修改您的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;
            }
    );
}

---

请添加表单提交方法代码。在此处添加html表单。看起来您的表单数据没有发送到您正在调用API的服务。错误是正确的，您有“mob”和“isMember”等。您需要将这些数据引用到对象，但需要传入数组。我认为您现在只需要从代码中退一步，因为storeEmployee没有迭代数组并存储每个雇员。@SurenderKherwa我更新了我的question@AniruddhaDas我更新了我的问题现在我没有错误，但它也没有存储数据：/Add console.log在你的storeEmployee方法中，并检查你是否得到此处的值StoreEmployeeEmployees:雇员{console.log'employes.name='+employes.name；它记录我输入的数据，但不保存在数据库中，刷新后会消失http错误代码是什么？您可以在浏览器F12>网络选项卡中查看https调用。您也可以尝试http客户端，首先确保后端工作正常。XMLHttpRequest无法加载。响应r preflight具有无效的HTTP状态代码405，但通过正确使用POSTER，它可以发布数据