針對ngFor變量的Angular2 ngModel

Question

是否不可能（或者不可能）對ngModel值使用ngFor ？ Angular是否試圖保護我免受糟糕的表現？

效果很好： http ： //jsfiddle.net/langdonx/n5pjgev6/

<input type="text" [(ng-model)]="value">{{value}}

效果不是很好： http ： //jsfiddle.net/langdonx/n5pjgev6/1

<li *ng-for="#name of names">
    <input type="text" [(ng-model)]="name">{{name}}
</li>

EXCEPTION：無法重新分配變量綁定名稱

我也嘗試綁定到數組，其中......有點工作，但劫持焦點並引發異常： http ： //jsfiddle.net/langdonx/n5pjgev6/2/

<li *ng-for="#name of names; #i = index">
    <input type="text" [(ng-model)]="names[i]">{{name}}
</li>

EXCEPTION：遞歸調用LifeCycle.tick

編輯：

我可以使用更直接的方法解決LifeCycle.tick問題，但焦點仍然被盜，因為ngFor重繪東西： http ： //jsfiddle.net/langdonx/n5pjgev6/3/

<li *ng-for="#name of names; #i = index">
    <input type="text" [value]="names[i]" (input)="names[i] = $event.target.value">{{names[i]}}
</li>

Answer 1

我認為ngFor不喜歡跟蹤數組元素，這些元素是具有ngModel原始值。

如果你刪除循環中的ngModel ，它的工作原理。

當我更新jsfiddle時它也有效 ：

this.names = [{name: 'John'}, {name: 'Joe'}, {name: 'Jeff'}, {name: 'Jorge'}];

和

<li *ng-for="#n of names"><input type="text" [(ng-model)]="n.name">{{n.name}}</li>

Answer 2

解決方案是通過索引引用ngModel的值。 因此[(ngModel)]="names[index]" 。

但這還不夠，因為*ngFor按值跟蹤項目。 一旦值更改，就無法跟蹤舊值。 因此我們需要更改跟蹤函數以返回索引，從而trackBy: trackByIndex 。

這個問題在這里解釋。

解：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" 
        *ngFor="let name of names; let nameIndex = index; trackBy: trackByIndex"
        [(ngModel)]="names[nameIndex]"/>
      <br/>
      {{ names | json }}
    </div>
  `,
})
export class App {

  names: string[];

  constructor() {
    this.names = ['a', 'b', 'c'];
  }

  public trackByIndex(index: number, item) {
    return index;
  }
}