针对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;
  }
}