获取错误TypeError：无法读取未定义的属性“ completed”

Question

我当前正在构建一个“待办事项”列表，并添加一个带有click事件的复选框，一旦单击了该复选框，它应该在输入的任务中具有删除线元素。

HTML代码：

<ul class="list-group">
    <li *ngFor="let todo of todos; let i = index"
        class="list-group-item shadow p-3 mb-5 bg-white rounded border border-dark rounded" id="myTask">
        <div class="todo-item">
            <span class="todo-title" [ngClass]="{'todo-complete': todo.completed}">
                {{todo.task}} <input type="checkbox" class="todo-checkbox" (click)="completeItem()" />
                <button type="button" class="btn btn-danger" (click)="delete()">X</button>

            </span>
        </div>
        </li>

</ul> 

TypeScript代码：

  addToDo(todo: string, cm?: boolean) {
    const td = {
      id: null,
      task: todo,
      completed: cm,
    }
    if (todo === '') {
      alert('You must enter in a task TO DO!')
    } else {
      this.todos.push(td);
    }
    this.saveItemsToLocalStorage(this.todos);
  }

  delete(index: number) {
    this.todos.splice(index, 1);
    console.log("index", index);
    this.saveItemsToLocalStorage(this.todos);
  }

  clear() {
    this.todos = [];
    console.log('index', this.todos)
    this.saveItemsToLocalStorage(this.todos);
  }

  completeItem() {
    this.update.emit({
      todo: this.todos,
      changes: {completed: !this.todo.completed},
    });

  }