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();
}

和那个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>

我有一个错误：无法找到姓名＆＃39; mob＆＃39;，找不到姓名＆＃39; job＆＃39;，无法找到姓名＆＃39;电子邮件＆＃39;，无法找到姓名＆＃39; isMember＆＃39;，无法找到姓名＆＃39; isActive＆＃39;

任何帮助？

Answer 1

修改storeEmployee方法：

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;
            }
    );
}

尝试此操作以检查来自服务器的响应：

function convert(str){
    return str.split(' ').map(e => e.replace(/([A-Za-z])(\w+)/, (x, y, z) => y.toUpperCase()+z.toLowerCase())).join(' ');
}

console.log(convert('Potato potato pOtato'))

张贴表格数据角4

1 个答案: