I am looking to make some updates to my Angular 2 model.
Here is my update method:
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();});
}
And here is the HTML code snippet:
<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>
I am facing an issue with two-way binding with the model. Here is how it is handled in the backend:
[HttpPut]
[Route("Update/{id}")]
public async Task<HttpResponseMessage> Update(int id, DepartmentModel model)
The problem I am encountering is that when I try to edit the model, the integer id is passed to the backend but the model id (which should match the passed id) is null. Additionally, when I click on the edit button, I am unable to see any changes on the view when I input values for the model. I was able to quickly solve this issue in Angular 1, but Angular 2 has proven to be more challenging. My goal is to have the id automatically connected to my model when I click edit and to see it displayed in the input field along with the other two properties. Any help or guidance would be greatly appreciated! Thank you!