HTTP PUT请求使用角度为2的表单

时间:2017-01-25 13:58:23

标签: angular

我的帖子,获取和删除请求工作正常但我在提交表单时一直在努力如何提出请求。我能够将数据提取到表单中,但是当我单击提交按钮来编辑数据时,更新不会反映在数据库中。这是我的代码

//要编辑的表单

<form (ngSubmit)="onEdit(edit)" #edit="ngForm" >
  <div class="form-group">
    <label for="first_name">First Name</label>
    <input type="text" class="form-control" id="firstname" [(ngModel)]="edit.first_name" name="first_name" required>
  </div>
  <div class="form-group">
     <label for="last_name">Last Name</label>
     <input type="text" class="form-control" id="lastname"  [(ngModel)]="edit.last_name" name="last_name" required>
  </div>
  <button type="submit">Edit</buttton>

// component

edit = {
        first_name: "",
        last_name: ""
       }

onEdit() {
    this.httpService.update(this.edit)
         .subscribe(
            data => console.log(data)
         )}

//根据行索引编辑人员

editPerson(person) {
  this.edit = person;
  console.log(person)
}

//按钮进行编辑

  <td><a class="btn btn-default"  data-target="#edit" (click)="editPerson(client)"><em class="fa fa-pencil"></em></a>Edit</td>

// httpservice

update(person) {
        let headers = new Headers({'Content-Type':'application/json'});
        let options = new RequestOptions({headers: headers});
        let body = JSON.stringify(person);
        return this.http.put('http://example.com'+person.id,body,headers)
            .map((response:Response) => response.json());

2 个答案:

答案 0 :(得分:0)

如评论中所述,问题在于使用Chrome和localhost。 Chrome有一个限制,在使用localhost时不允许使用CORS请求。

有关详细信息,请参阅此答案: Deadly CORS when http://localhost is the origin

答案 1 :(得分:0)

尝试在主机文件中添加新行

windows-&gt; system32-&gt; driver-&gt; etc-&gt; hosts(导航到主机文件)

使用cmd“ipconfig”命令获取localhost ip

然后使用localhost ip和dummy url添加new

例如

127.0.0.1 mytest.com

然后使用mytest.com打开浏览器