Question

我已经能够处理除PUT方法之外的所有其他http方法。我有一个编辑表单，我可以将已存储的数据提取回表单，但在我单击提交按钮重新保存编辑的数据后，没有任何反应。可能是什么问题呢？以下是我的所作所为。

编辑游戏表单

<form (ngSubmit)="onSubmitForm(e)" #e="ngForm" >
    <div class="form-group">
        <label for="game_name">Name of Game</label>
        <input type="text" class="form-control" id="game_name" [(ngModel)]="eGame.game_name"  >
    </div>
    <div class="form-group">
        <label for="game_type">Type of Game</label>
        <input type="text" class="form-control" id="game_type"  [(ngModel)]="eGame.game_type">
    </div>
    <button type="submit">Submit</button>
</form>

在我的组件中

eGame = {
    game_name:"",  //set default values
    game_type:""
};

onSubmitForm(game){
    this.httpService.updateGame(game.id)
        .subscribe(
            data => console.log(data)
        )
}


gameEdit(game){ //function called to fetch data into edit form 

    this.eGame = game ;
    console.log(game)
}

为我的游戏服务

updateGame(game){

    const body = JSON.stringify(game);
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
        return this.http.put('url' +game.id, body, headers)
        .map((data:Response) =>data.json())
}

Answer 1

我想这是你template中的一个简单错误。这样做：

<form (ngSubmit)="onSubmitForm(e)" #e="ngForm">

onSubmitForm(game) {
  this.httpService.updateGame(game.value.id) // Note that you must call '.value'
    .subscribe(
      data => console.log(data)
    )
}

或者您可以直接在模板上传递值，如下所示：

<form (ngSubmit)="onSubmitForm(e.value)" #e="ngForm">

演示： PLUNKER

角度为2的HTTP PUT请求

1 个答案: