双向更新模型

Question

我需要在角2

我更新的方法来更新我的模型时，在角2结合样子：

putDep(item) { 
    var headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 

    this.selected.departmentName = item.departmentName; 
    this.selected.departmentLocation = item.departmentLocation; 

    return this.http.put('http://localhost:65402/company/api/department'+ "/update/" + this.selected.departmentNo, JSON.stringify(item),{headers: headers}) 
        .subscribe(res => {this.departments = res.json();}); 

}

和HTML代码：

<form #selected="ngForm" [hidden]="!showEditView" align="center"> 
    <div> 
     <label for="editAbrv">Department No:</label><br> 
     <input ngControl="departmentNo" placeholder="name"> 
    </div> 
    <div> 
     <label for="editAbrv">Department name:</label><br> 
     <input ngControl="departmentName" placeholder="name"> 
    </div> 
    <div> 
     <label for="editAbrv">Department Location:</label><br> 
     <input ngControl="departmentLocation" placeholder="location"> 
    </div> 

    <div> 
     <a href="javascript:void(0);" (click)="putDep(selected.value)" title="Add"> 
      Save 
     </a> 
     <a href="javascript:void(0);" (click)=showHide($event) > 
      Cancel 
     </a> 
    </div> 
</form> 

问题出在2种方式与模型绑定。这是它的外观在后端：

[HttpPut] 
      [Route("Update/{id}")] 
      public async Task<HttpResponseMessage> Update(int id, DepartmentModel model) 

的问题是，当我点击编辑模式，我INT ID传递到后端，但我的模型ID（应当网元一样传入ID）为null 。另外，当我点击编辑按钮时，我无法看到在为模型输入值时如何改变视图。在角1我快速解决它，但在角2是斗争。关键是，我想要id自动连接到我的模型，当我点击编辑，我可以看到它在输入字段（以及其他2个属性）。感谢帮助！

Answer 1

我会用ngModel来解决这个问题。选择元素时，可以在组件中设置属性selectedDepartment并更新部门。您可以在输入上绑定此对象的属性（仅限您要更新的属性）。

此selectedDepartment对象包含当前标识符所包含的所有属性。

单击“保存”按钮时，可以发送此对象而不是表单值。这样你就不会失去标识符。

这里是形式的代码：

<form #selected="ngForm" [hidden]="!showEditView" align="center"> 
    <div> 
    <label for="editAbrv">Department No:</label><br> 
    <input [(ngForm)]="selectedDepartment.departmentNo" ngControl="departmentNo" placeholder="name"> 
    </div> 
    <div> 
    <label for="editAbrv">Department name:</label><br> 
    <input [(ngForm)]="selectedDepartment.departmentName" ngControl="departmentName" placeholder="name"> 
    </div> 
    <div> 
    <label for="editAbrv">Department Location:</label><br> 
    <input [(ngForm)]="selectedDepartment.departmentLocation" ngControl="departmentLocation" placeholder="location"> 
    </div> 

    <div> 
    <a href="javascript:void(0);" (click)="putDep(selectedDepartment)" title="Add"> 
     Save 
    </a> 
    <a href="javascript:void(0);" (click)=showHide($event) > 
     Cancel 
    </a> 
    </div> 
</form>