Generically Binding Values with ngModel

Question

I am just learning Angular 2 and one issue I've been unable to tackle is creating forms with ngModel without statically specifying the name of the attribute I am binding to.

I am unsure of the mechanisms for overcoming this problem (though I am sure it's common enough) or how it's referred to within the community.

My template does display the keys and values but it doesn't reflect the updates on save. It seems like referring to the attribute in a dynamic way causes the binding to be lost. (Is it evaluating the bound attribute before piping the data?)

Here is where I am stuck:

Template:

<table class="table table-responsive">
  <tr *ngFor="let prop of account | keyValues">
    <td>{{ prop.key }}</td>

    // Problem here:
    // if I have [(ngModel)]="prop.key", it only displays the keys
    // if I sub in a static attribute e.g. [(ngModel)]="account.accountName" it works
    <td><input name="{{prop.key}}"  [(ngModel)]="prop.value" /></td>
  </tr>
</table>

Pipe:

@Pipe({
    name: 'keyValues'
})
@Injectable()
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

Component:

  ... boiler plate ...

  save(): void {
    this.accountsService.update(this.account)
      .then(() => this.goBack());
  }

  ...

Answer 1

Answer is to use Angular's Dynamic Forms

You can also leverage certain libraries like PrimeFaces' PrimeNG's editable datatable, which I highly recommend!