이 각도 바인딩이 작동하지 않는 이유는 무엇입니까?

Question

나는 다음과 같은 HTML

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

이는 ngFor 루프에 표시되어 있습니다. 테스트 목적으로 selected 값을 출력하고 일부는 true이고 일부는 false이며, 이것에도 불구하고 모든 확인란이 선택되어 있습니다.

바인딩 구문에 문제가 있습니까?

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!

희망입니다!