この角度結合が機能しないのはなぜですか？

Question

私は、次のHTML

<input type="checkbox" name="person" [(ngModel)]="person.selected" /> 

これはngForループに表示されています。私はselectedの値をテスト目的で出力し、いくつかは真であり、他のものは偽です。これにもかかわらず、すべてのチェックボックスがチェックされます。

バインディング構文に問題はありますか？

Answer 1

すべてのチェックボックスで同じnameを使用していたという問題がありました。一意の名前を使用すると、その手口は完了しました。

Answer 2

バインディングを使用しても問題は発生しません。selectedが真実か偽であることを確認してください。ここで

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1 class="title">Simple component</h1> 
     <div *ngFor="let person of persons" > 
     {{person.name}} 
     <input type="checkbox" name="person" [(ngModel)]="person.selected" /> 
     </div> 
    ` 
    }) 
    export class AppComponent { 

    persons = [ 
    { 
     name: "first", 
     selected: true 
    }, 
    { 
     name: "second", 
     selected: false 
    }, 
    { 
     name: "third", 
     selected: false 
    }, 
    { 
     name: "fourtch", 
     selected: true 
    } 
    ] 
    } 

はPlunker!

は、この情報がお役に立てば幸いです！