如果复选框被选中，我如何使用平均堆栈中的复选框更新我的待办事项状态，它在 mongodb 数据库中为真，否则为假

Question

应用程序组件.ts

调试器给出 this.task 未定义的错误

updateTodo(task: any){
    this.todoService.updateData(task._id, this.task).subscribe(res => {
    this.data= res;
    console.log(res);
    console.log(this.task);
    });
}

应用程序服务.ts

这是在我的 angular 应用程序中调用后端 api 的服务文件

updateData(id: any , data: any){
    return this.httpClient.put('http://localhost:3000/todos/'+id, data);
}

app.component.html

这是我的应用程序的前端，其中显示待办事项和其他用户界面

<tbody>
    <tr *ngFor="let todo of tasks ; let i = index">
        <td>{{todo.todos}}</td>
        <td> <input type="checkbox" (change)="updateTodo(todo)"[checked]="todo.isDone</td>
        <td>
            <button class="btn btn-danger btn-sm" id="del-btn" 
            (click)="deleteData(todo._id)">Delete</button>
        </td>
    </tr>
</tbody>

应用程序.model.ts

这是 model 文件

export class Todo {
    _id:any;
    todos:any;
    isDone:any;
}

后端 api

这是我为更新待办事项而创建的 backedn function

router.put('/:id' , async (req,res) => {
    const id = req.params.id;
    if(ObjectId.isValid(id)){
        const todo = (req.body);
        const todoUpdate = await Todo.findByIdAndUpdate(id ,{$set:emp}, {new:true});
        res.status(200).json({code:200, message:'Todo Updated Successfully'});
    }
    else{
        res.status(400).send('Todo Not Found By Given Id' + id);
    }
});

Answer 1

我不确定我们是否相互理解，但您将task作为参数传递，但有两次您试图使用this.task的值。 它们不是一回事，如果this.task没有初始化，那么它当然会显示它是undefined 。

updateTodo(task: any) {
  console.log('task:', task); // Is the task correct?
  this.todoService.updateData(task._id, task).subscribe(res => {
    this.data = res;
    console.log(res);
    console.log(task); //not this.task
  });
}

编辑：如果数据库未更新，您可能会在那里发送不正确的数据。 如果 Angular 端没有错误，您必须检查后端端。

Answer 2

我解决这个问题以在我的复选框输入字段中添加 [(ngModel)]="todo.isDone"

<tbody>
<tr *ngFor="let todo of tasks ; let i = index">
    <td>{{todo.todos}}</td>
    <td> <input type="checkbox" (change)="updateTodo(todo)" [(ngModel)]="todo.isDone</td>
    <td>
        <button class="btn btn-danger btn-sm" id="del-btn" 
        (click)="deleteData(todo._id)">Delete</button>
    </td>
</tr>

在我的 app.component.ts 中

updateTodo(task: any) {
  this.todoService.updateData(task._id, task).subscribe(res => {
  this.data = res;
  console.log(res);
  console.log(task);

}); }