angular - Angular Bootstrap 4 changebox isn't changing

Question

I am trying to learn some angular basics. I did some checkbox list, but it doesn't change when unchecked. Here is my html component:

<ul class="list-group">
    <li *ngFor="let task of tasks" class="list-group-item">
        <div class="task-checkbox">
            <input type="checkbox"
            class="list-child"
            (change)="onTaskChange($event,task)"
            [checked]="task.completed">
            <span ngClass="{{task.completed ? 'name completed' : 'name'}}">{{ task.name }}</span>
            <span class="badge {{ getDueDateLabel(task) }} float-right ">{{ task.dueDate }}</span>
        </div>
    </li>
</ul>

And here is my method in app.component.ts :

  getDueDateLabel(task:Task) {
      if(task.completed == true ) {
          return 'badge-success';
      }else {
          console.log('Task changed color')
          return 'badge-danger';

      }
  }

In console i don't see a log, so i assume that it doesn't work. I am using Angular 9. Appreciate for any help. Thanks !

标签： angularbootstrap-4

Answer 1

您确定task.completed每次更改都会更新 的值，因为那是您必须要做的[checked]吗？