为什么切换复选框返回 false？

Question

I show checkboxes on the page.

When I click over it it is changed to true/false . If true the cehckbox should be checked.

Problem is when I click first checkbox it works, when click the second I get wrong completed: false in object {id: 2, content: "CSS", completed: false} , despite checkbox is checked:

pic 1

Code is by link to stackblitz

Answer 1

You are using ngModel directive wrong its [(ngModel)] not ([ngModel])

Answer 2

Checkboxes has rather a state (checked or not), not a value. If you are changing the model value after click, use checkbox only for showing the curent state. So i would change:

[(ngModel)]="todo.completed"

to [checked]="todo.completed"