更新模型时 Angular 2 中的双向绑定

Question

我需要在 Angular 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>

问题在于与模型的两种方式绑定。这是它在后端的样子：

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

问题在于，当我单击编辑模型时，我的 int id 传递到后端，但我的模型 id（应该与传递的 id 相同）为空。此外，当我单击编辑按钮时，当我为模型输入值时，我看不到视图的变化。在 Angular 1 中，我快速解决了它，但在 Angular 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>