title: How to *ngFor over set of ngModel bindable properties
body: <p>I'm trying to use <code>*ngFor</code> for a set of identical inputs save for the property the input should bind to.</p>
  
  <pre><code>&lt;mat-form-field *ngFor="let prop of [ID, Name, Nickname]"&gt;
      &lt;input matInput type="text" placeholder="prop.key" #propInput [(ngModel)]="prop"&gt;
      &lt;button mat-icon-button matSuffix mat-icon-button *ngIf="propInput.value" (click)="prop='';"&gt;
          &lt;mat-icon&gt;close&lt;/mat-icon&gt;
      &lt;/button&gt;
  &lt;/mat-form-field&gt;
  
   &lt;!-- bind test --&gt;
  &lt;input matInput type="text" placeholder="Name Test" #propInput [(ngModel)]="Name"&gt;
  </code></pre>
  
  <p><code>prop.key</code> does not work, but that is a separate question.</p>
  
  <p>Here is the tethered component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { EntitySrcService } from '../entity-src.service';
  
  @Component({
    selector: 'app-entity-table',
    templateUrl: './entity-table.component.html',
    styleUrls: ['./entity-table.component.less']
  })
  
  export class EntityTableComponent {
  
    constructor(
      private entitySrc: EntitySrcService
      ) {}
  
    public get ID(): string {
      return this.entitySrc.id;
    }
  
    public set ID(value: String) {
      this.entitySrc.id = value;
    }
  
    public get Name(): string {
      return this.entitySrc.name;
    }
  
    public set Name(value: String) {
      this.entitySrc.name = value;
    }
  
    public get Nickname(): string {
      return this.entitySrc.altName;
    }
  
    public set Nickname(value: String) {
      this.entitySrc.altName = value;
    }
  
  }
  </code></pre>
  
  <p>For the most part this seems to work as expected, but it seems the <code>[(ngModel)]</code> bind is only reading the property and not writing to it. So for example, if I update the bind test input, the Name field in the <code>ngFor</code> loop updates to match, but updating the one in the <code>ngFor</code> loop does not update the one in the test.</p>
  
  <p>I'm using <code>get/set</code> properties in the component to proxy to the actually storage location, but my understanding is that a <code>get/set</code> property should act the same as a normal property (and using a normal property has the same one way bind behavior).</p>
  
  <p>So how do I properly iterate over a set of properties that I want to bind to?</p>