Góc 2 ngModel liên kết trong lồng nhau ngFor

Question

Tôi đang cố gắng chuyển đổi ứng dụng Góc 1 sang Góc 2. Lặp qua một mảng răng cưa của booleans (boolean[][]). Tôi đang render ra checkboxes với đoạn mã sau:

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

Các hộp kiểm hiển thị một cách chính xác, tuy nhiên, nếu tôi chọn một hộp kiểm một ở bên phải của nó cũng được chọn.

Logic này hoạt động tốt trong 1 ứng dụng kiễu góc vì vậy tôi không chắc chắn nếu đó là một vấn đề với cách tôi đang sử dụng ngModel hoặc một vấn đề với góc 2.

Bất kỳ trợ giúp sẽ được nhiều đánh giá cao

Answer 1

cập nhật

cách chính thức để sử dụng ngForTrackBy có vẻ là

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

.210

Xem http://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.html để biết thêm chi tiết

lưu ý các : trong trackBy:customTrackBy

gốc

Bạn có thể sử dụng *ngForTrackBy cho việc này:

@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; 
    } 
} 

góc theo mặc định theo dõi nhận dạng đối tượng nhưng khác nhau true s và false s có cùng một bản sắc. Nếu không có *ngForTrackBy Góc mất theo dõi mà true hoặc false ở vị trí nào. Với *ngForTrackBy="customTrackBy", chúng tôi làm cho *ngFor sử dụng chỉ mục thay vì nhận dạng đối tượng.

Plunker example

Xem thêm

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