Đang cập nhật đầu vào ảnh hưởng đến đầu vào khác nhưng không có ràng buộc

Question

Đây là HTML của tôi:

<tr *ngFor="let row of formData; let i = index" [attr.data-index]="i"> 
    <td *ngFor="let rowdata of formData[i]; let j = index" [attr.data-index]="j"> 
     <input type="checkbox" name="row-{{i}}-{{j}}" [(ngModel)]="formData[i][j]"> 
    </td> 
</tr> 

Như bạn có thể thấy tôi đã thiết lập tên duy nhất trên checkboxes để cô lập chúng hoàn toàn.

formData sau một cấu trúc như thế này:

formData = [ 
      [false, false], 
      [true, true], 
      [false, true] 
      ] 

Dạng populates một cách chính xác.

Hộp kiểm được tạo ra một cách chính xác, tuy nhiên, có một số hành vi kỳ quặc:

Khi tôi nhấp vào hộp kiểm cho cột đầu tiên, nó cũng kiểm tra hộp cho cột thứ hai; điều này có vẻ giống như tổng hành vi ngẫu nhiên, nhưng khi tôi chọn một hộp cho cột thứ hai, nó không ảnh hưởng đến hộp kiểm cho cột đầu tiên

Bất kỳ ý tưởng nào về việc này đang xảy ra?

EDIT

Observation: Tôi đã thay đổi input đến một đầu vào tiêu chuẩn (chưa hộp kiểm).

Tôi đã thay đổi giá trị biểu mẫu thành "true", "false" .. thay vì true, false.

Khi tôi cố gắng thay đổi văn bản trong đầu vào, tôi chỉ có thể nhập một ký tự và hộp nhập "bỏ chọn" (nghĩa là tôi phải tiếp tục nhấp vào hộp nhập để kích hoạt mỗi lần nhập ký tự)

EDIT

HTML Output theo yêu cầu:

Answer 1

Sử dụng trackBy trong ngFor thứ hai đã làm cho nó làm việc cho tôi:

mẫu:

<tr *ngFor="let row of formData['rows']; let i = index;" [attr.data-index]="i"> 
    <td *ngFor="let rowdata of formData['rows'][i]; let j = index; trackBy: trackByIndex" [attr.data-index]="j"> 
     <input type="checkbox" id="row-{{i}}-{{j}}" name="row-{{i}}-{{j}}" [(ngModel)]="formData['rows'][i][j]"/> 
    </td> 
</tr> 

Component:

Xác định chức năng trackByIndex:

trackByIndex(index: number, value: number) { 
    return index; 
} 

Lý do để sử dụng một trackBy là giải thích here (tín dụng đi vào zoechi@github) :

bạn đang lặp lại các mục bạn đang chỉnh sửa và chúng là các giá trị nguyên thủy . ngFor không thể theo dõi danh tính bởi vì khi giá trị thay đổi từ 1 đến 3 (bằng cách chỉnh sửa), nó sẽ trở thành một nhận dạng khác. Hoặc sử dụng trackBy tùy chỉnh theo dõi chỉ mục hoặc sử dụng các đối tượng thay vì giá trị nguyên thủy.