Angular 4-从数据库编辑数据

Question

如何使用HTTP服务从数据库中更新数据。

php mysql

function updateEmployees() {
    global $con, $employeesTable;
    return $updateEmployees = mysqli_query($con, "UPDATE $employeesTable SET first_name='test', last_name ='".$request->last_name."' WHERE emp_id = '".$request->user_id."' ");
}

form

<p><input type="text" [(ngModel)]="first_name"></p>
<p><input type="text" [(ngModel)]="last_name"></p>
<p><input type="hidden" [(ngModel)]="user_id"></p>
<button (click)="editForm()">Edit</button>

服务

  updateEmployees(data) {
   console.log(data);
   let headers = new Headers({ 'content-type': 'application/json' }),
     options = new RequestOptions({ headers: headers });
   this.http.post('http://localhost/employees/?p=updateEmployees', data, options)
  .subscribe(data => data);
}

组件

在页面加载上，我从数据库中获取的名称和最后一个名称将将数据传递给输入表单。

  ngOnInit() {
  this.activatedRoute.queryParams.subscribe((queryParams: Params) => {
    let userId = queryParams['id'];
    this.employeesServices.getEmployeesById(userId)
      .subscribe(data => {
        this.first_name = data.first_name,
        this.last_name = data.last_name,
        this.user_id = userId
      });
  });
}

然后在表单上提交，它将将更新的数据发布到数据库。但我不能正确。

editForm() {
  this.myForm = new FormGroup( {
    'first_name': new FormControl(this.first_name),
    'last_name': new FormControl(this.last_name)
  } )
  this.employeesServices.updateEmployees(this.myForm.value);
}

日志显示我{first_name：" input1"，last_name：" input2"}，但不更新到数据库

Answer 1

html

<form (ngSubmit)="update(userform)" #userform="ngForm">
<p><input name="first_name" type="text" [(ngModel)]="first_name"></p>
<p><input name="last_name" type="text" [(ngModel)]="last_name"></p>
<p><input name="user_id" type="hidden" [(ngModel)]="user_id"></p>
<button type="submit">Edit</button>
</form>

组件

 update(form: NgForm) {
     console.log(form.value); // confirm value on console
     this.employeesServices.updateEmployees(form.value);
    }

您的服务应该像

updateEmployees(data) : Observable<any>{
   let headers = new Headers({ 'content-type': 'application/json' }),
     options = new RequestOptions({ headers: headers });
   const url = 'http://localhost/employees/?p=updateEmployees';
   return this.http.put(url, data, options).map(
            (res: Response) => {
                return res.json();
            }).catch(
            (error: Response) => {
                return Observable.throw(error.json() as JsonResponse);
            });
}