How i can update my todo status using checkbox in mean stack if check box is checked it place true in mongodb database otherwise false

Question

app.component.ts

Debugger given the error that this.task is undefined

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

app.service.ts

This is service file where the backend api are call in my angular app

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

app.component.html

This is the frontend of my app where the todos show and others user interface

<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>

app.model.ts

This is model file

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

backend api

This is the backedn function which i created to update my todo

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

I'm not sure if we understood each other, but you are passing the task as a parameter but then on two occasions you are trying to use the value of this.task . They are not the same thing and if this.task is not initialized then of course it will show that it's 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
  });
}

EDIT: If the DB is not updated you might be sending incorrect data there. If there are no errors on Angular side you have to check the Back-End side.

Answer 2

I solve this question to add [(ngModel)]="todo.isDone" in my checkbox input filed

<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>

And In my app.component.ts

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

}); }