my problem --
I have a field for customer address and I am displaying the value for it by retrieving it from db and binding it. Now, I have tried to implement inline-edit functionality. When a user clicks on the address value, it turns into a textbox that is still showing the original value. Now after editing/changing some text, as the user clicks out of the texbox or 'tabs' away, it reverts back to the original label field again, but still showing only the old value and not the newly updated value. Of course I am updating the value in DB and it is perfectly updating. But I would like is to show the newly updated value bound to the label instead of the old one. And one way for this - is to call the retrieve and bind code all over again. WHICH I SIMPLY WANT TO AVOID. IT MAKES NO SENSE.
So, what's the trick? How can this be done? I'll post some of the relevant code so that you get an idea.
. some html markup
<tr style="margin-top:22px">
<td>Address (Residential): </td>
<td>
<div *ngIf="ed3">
<input type="text" id="address_txt" (blur)="setval3($event.target.value)" [value]="this.addressVar" class="form-control" />
</div>
<div *ngIf="!ed3">
<div title="Click to Edit" class="inline-edit" id="addr_div" (click)="edit3(val)" (focus)="edit3(val)">{{this.addressVar}}</div>
</div>
</td>
</tr>
. some of the TS code
private ed3: boolean = false;
public addressVar: any = '';
edit3(value: any) {
if (this.disabled) {
return;
}
this.ed3 = true;
}
setval3(value: any) {
this.ed3 = false;
this.fieldtoUpdate = 'customer_resaddress';
var body =
{
id: this.cus_id,
new_val: value,
field: this.fieldtoUpdate
}
var _Headers = new Headers();
_Headers.append('Content-Type', 'application/json');
public ngOnInit() {
//stuff I am doing to fetch and bind from DB
//as you can see, I am using the variables now
this.http.post('api/SampleData/GetCustomerAllDetails', JSON.stringify(body), { headers: _Headers })
.subscribe(result => {
this.cObjx = result.json() as CustomerD;
this.addressVar = this.cObjx.customer_resaddress == null ? 'Not specified' : this.cObjx.customer_resaddress;
this.phoneVar = this.cObjx.customer_phone;
this.mobileVar = this.cObjx.customer_mobile == null ? 'Not specified' : this.cObjx.customer_mobile;
this.officephnVar = this.cObjx.customer_officephone == null ? 'Not specified' : this.cObjx.customer_officephone;
},
error => console.error(error));
}
this.http.post('api/SampleData/UpdateCustomerDetails/values', JSON.stringify(body), { headers: _Headers })
.take(1)
.subscribe((response: any) => {
if (response.success) {
console.log('Details updated!');
}
else {
console.log('Unable to update details!');
}
})
}
As you can understand, calling the bind function again is not my aim. I am trying to avoid that. From some articles I read on this type of scenario, it appears I have to use some kind of third [temporary control] which would basically display the new value. Or maybe I am wrong with that and there's a better idea. I really need some guidance on this. Quite confused!
It doesn't look like you are using two-way binding?
Instead of this:
[value]="this.addressVar"
Consider using this:
[(ngModel)]="this.addressVar"