Angular 8 ngFor's keyvalue pipe and ngModels. Having issues binding values

KeyValuePipe in a nutshell:

Transforms Object or Map into an array of key value pairs.

The keyvalue pipe creates a new array from a given object, and as so, binding to it will not affect the original object.

As for your issue, instead of using the (change) event listener you can just bind ngModel to your original object, and point to it directly:

<div *ngFor="let prop of myObject | keyvalue">
      <input [(ngModel)]="myObject[prop.key]">
</div>

Hope this helps!

You can define the changeKey function like the following code.

In Component

changeKey(prevKey, newKey) {
  const value = this.obj[prevKey];
  delete this.obj[prevKey];
  this.obj[newKey] = value;
}

In HTML

<input (change)="changeKey(pref.key, $event.target.value)" [ngModel]="pref.key"><br />

I created a working example on stackblitz.

Related