post 表单数据 angular 4

Question

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

这就是数据-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'，找不到姓名 '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;
            }
    );
}

post 表单数据 angular 4

post form data angular 4

api

form-data

typescript

angular