Подтвердить что ты не робот

Angular 2 ngМодель привязки во вложенном ngFor

Я пытаюсь преобразовать приложение Angular 1 в Angular 2. Зацикливание через зубчатый массив булевых (boolean[][]). Я обрабатываю checkboxes следующим кодом:

<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.

Любая помощь будет высоко оценена

4b9b3361

ОТВЕТЫ

Ответ 1

Обновление

Официальным способом использования 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;
  }
}

Angular по умолчанию отслеживает идентификатор объекта, но разные true и false имеют одинаковый идентификатор. Без *ngForTrackBy Angular потеряет трек, который true или false находится в этой позиции. С помощью *ngForTrackBy="customTrackBy" мы делаем *ngFor используем индекс вместо идентификатора объекта.

Пример плунжера

См. также