Expected behavior So I'm working on a table that is meant to detect and record changes made by a user and log them but not display any changes until a higher authority commits those changes. Part of the app involves passing along said changes with JSON.parse and JSON.stringify that's nut fully fleshed otu et. The problem comes when I try to read in what in the line of this.jerb in typescript which is databound{{}} but only reads the value from the original service that's providing the fields rather than what is being typed in the field.

So I ask is there anyway to update the values in an array with what's typed in content editable span field?

HTML line in question:

<ng-container *ngFor="let j of jerb | filter : 'title' : searchString; let i = index">
...
...    
...
<span id="textfield" [attr.contenteditable]="Editmode" (keypress)="onPreventNum($event, i)" >{{j.title}}</span>

HTML: associated buttons that enable editing

<td>
                <button *ngIf="!Editmode" type="button" mdbBtn color="info" (click)="Editlist()" mdbWavesEffect>Edit</button>
                <button *ngIf="Editmode" type="button" mdbBtn color="success" (click)="EditCommit(i, j.id, j.title, j.date, j.location, j.status, j.openings, j.duration)" mdbWavesEffect>Commit</button>
                <button *ngIf="Editmode" type="button" mdbBtn color="danger" (click)="EditClose()" mdbWavesEffect>Cancel</button>
</td>

Associated typescript:

Editlist(){ //Enables Editting
this.Editmode=true;
  }
  EditClose(){ //closes editting mode without saving changes
this.Editmode=false;
this.jerb=JSON.parse(JSON.stringify(this.jerbpure));

  }
  EditCommit(i, id: any, title: string, date: any, location: string, status: string, openings:                                     number, duration: string){ // closes editting mode while saving changes for admin approval and reverting to orgininal for time being

this.Editmode=false;
console.log(JSON.parse(JSON.stringify(this.jerb[i])));
this.jerbchanges[this.counter]=JSON.parse(JSON.stringify(this.jerb[i]));//instead of erasing changes edits, commits saves the changes and passes to hidden table for admin approval
this.jerb=JSON.parse(JSON.stringify(this.jerbpure));
this.counter+=1;
this.changeChecker=[]

  }

onPreventNum(event: any, i){
if (


  (event.charCode == 32 || //space
   event.charCode == 39 || //apostrophe
   event.charCode == 45 || //hyphen
   event.charCode == 46 || //period
   event.charCode >= 65 && event.charCode <= 90 ||//Capitals
   event.charCode >= 97 && event.charCode <= 122 //lowercase   
   )

) {
  console.log("A letter or special char was entered");
  console.log(event.charCode);
  console.log(this.jerb[i].title)
  return;  // let it happen, don't do anything

}