角度コンポーネントのループで作成されたチェックボックスが不正確な選択状態を示します

Question

* ngForループの配列の値に基づいていくつかのチェックボックスを作成しています。 これらのチェックボックスの1つをクリックすると、選択されたものとしてマークされますが、別のものが選択されて表示されますが、モデルでは最初のチェックボックスの値だけが変更されています。

例plunkr

に私のコンポーネントは次のとおりです。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div *ngFor="let item of schedule; let i = index"> 
      <input type="checkbox" [(ngModel)]="schedule[i]"> 
     </div> 
     <span>{{schedule | json}}</span> 
    </div> 
    ` 
}) 
export class AppComponent { 
    schedule: boolean[] = []; 

    constructor() { 
     for (let i = 0; i < 7; i++) { 
      this.schedule.push(false); 
     } 
    } 
} 

それを引き起こすコードに正しくないことができますか？

Answer 1

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div *ngFor="let item of schedule; let i = index"> 
      <input 
        type="checkbox" 
        id="'checkbox_' + i" 
        name="'checkbox_' + i" 
        [(ngModel)]="schedule[i]"> 
      <label [attr.for]="'checkbox_' + i"></label> 
     </div> 
     <span>{{schedule | json}}</span> 
    </div> 
    ` 
}) 
export class AppComponent { 
    schedule: boolean[] = []; 

    constructor() { 
     for (let i = 0; i < 7; i++) { 
      this.schedule.push(false); 
     } 
    } 
} 

Answer 2

私は非常に同じ問題を抱えていました。しばらくすると、追跡が助けになることが分かりました。テンプレートで

...コンポーネントで

<span *ngFor="let checkbox of checkboxes; let i = index; trackBy: trackByFn"> 

...

trackByFn(index, item) { 
    return index; 
} 

私はそれが角度変化の検出メカニズムを助け、そして何度もngFor DOMインスタンスをインスタンス化しないように思います。たぶん、教祖が私たちにもっと正確な説明を与えるかもしれません...