title: Angular - How to get input value at ngFor loop with one way binding
body: <p>Can you give me a way to get input value at ngFor loop with one way binding?</p>
  
  <pre><code>&lt;div *ngFor="let d of dataList"&gt;
    &lt;input #inputValue type="text" [ngValue]="d.value"&gt;
    &lt;button *ngIf="!d.open" (click)="d.open = true"&gt;change&lt;/button&gt;
    &lt;button *ngIf="d.open" (click)="save(d.id, NEWVALUE); d.open = false;"&gt;save&lt;/button&gt;
    &lt;button *ngIf="d.open" (click)="d.open = false"&gt;cancel&lt;/button&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p>How can I set NEWVALUE?
  with two-way binding is easy. 
  but after click cancel, value already changed
  as I don't want.
  So would avoid that way.</p>
  
  <p>One solution I've found is using (ngModelChange).</p>
  
  <pre><code>&lt;div *ngFor="let d of dataList"&gt;
    &lt;input #inputValue type="text" [ngValue]="d.value" (ngModelChange)="dataChanged($event)"&gt;
    &lt;button *ngIf="!d.open" (click)="d.open = true"&gt;change&lt;/button&gt;
    &lt;button *ngIf="d.open" (click)="save(d.id); d.open = false;"&gt;save&lt;/button&gt;
    &lt;button *ngIf="d.open" (click)="d.open = false"&gt;cancel&lt;/button&gt;
  &lt;/div&gt;
  
  
  private newVal;
  dataChanged(val) {
    this.newVal = val;
  }
  save(id) {
    saveDb(id, this.newVal);
  }
  </code></pre>
  
  <p>This is not clear and optimized code as I guess.</p>
  
  <p>As I know, template binding with # is also not work with ngFor. like</p>
  
  <pre><code>&lt;div *ngFor="let d of dataList"&gt;
    &lt;input #inputValue_{{d.id}} type="text" [ngValue]="d.value"&gt;
    &lt;button *ngIf="d.open" (click)="save(inputValue_{{d.id}}.value); d.open = false;"&gt;save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Do you have any good solution for me?</p>