Angular2的ngModel和ngFor变量

Angular2 ngModel against ngFor variables

本文关键字：ngFor 变量 ngModel Angular2      更新时间：2023-09-26

是否不可能(或尚不可能)使用ngModel对ngFor的值?Angular是在保护我不受糟糕性能的影响吗?

Works great: 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>

异常:不能重新分配变量绑定名

我也尝试绑定到数组，这…还行，但会劫持焦点并抛出异常:http://jsfiddle.net/langdonx/n5pjgev6/2/

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

例外:生命周期。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>

我认为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>

解决方案是通过索引引用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;
  }
}
相关文章：