角度2 ngModel绑定在嵌套的ngFor

我正在尝试将Angular 1应用程序转换为Angular 2.循环穿过一个锯齿形的布尔数组(boolean [] []).我正在使用以下代码显示复选框:

<div *ngFor="#cell of CellData; #parentIndex = index">
    <input *ngFor="#col of cell; #childIndex = index" type="checkbox" [(ngModel)]="CellData[parentIndex][childIndex]" />      
</div>

复选框显示正确,但是,如果我选择了一个复选框,那么它也被选中.

这个逻辑在Angular 1应用程序中工作正常,所以我不知道这是一个使用ngModel的方式或者Angular 2的问题.

任何帮助将不胜感激

更新

使用ngForTrackBy的官方方式似乎是

      <input 
          *ngFor="let col of cell; let childIndex=index; trackBy:customTrackBy" 
          type="checkbox" 
          [(ngModel)]="CellData[parentIndex][childIndex]" />      

详见http://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

注意:在trackBy中:customTrackBy

原版的

您可以使用* ngForTrackBy:

@Component({
  selector: 'my-app', 
  template: `
    <div *ngFor="let cell of CellData; let parentIndex = index">
      <input 
          *ngFor="let col of cell; let childIndex = index" type="checkbox" 
          *ngForTrackBy="customTrackBy" 
          [(ngModel)]="CellData[parentIndex][childIndex]" />      
    </div>

    Data:<br/><br/>
    {{CellData | json}}
  `
})
export class AppComponent {
  constructor() {
    this.CellData = [
      [ true, false, true, false ],
      [ false, true, false, true ]
    ]
  }

  customTrackBy(index: number, obj: any): any {
    return index;
  }
}

角度默认跟踪对象身份,但不同的队列和伪造具有相同的身份.没有* ngForTrackBy斜线失踪跟踪哪个位置是真或假.使用* ngForTrackBy =“customTrackBy”我们使* ng使用索引而不是对象标识.

Plunker example

也可以看看

> https://github.com/angular/angular/issues/4402

翻译自:https://stackoverflow.com/questions/36469710/angular-2-ngmodel-bind-in-nested-ngfor

转载注明原文:角度2 ngModel绑定在嵌套的ngFor