[英]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
app.component.ts应用程序组件.ts
Debugger given the error that this.task is undefined调试器给出 this.task 未定义的错误
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应用程序服务.ts
This is service file where the backend api are call in my angular app这是在我的 angular 应用程序中调用后端 api 的服务文件
updateData(id: any , data: any){
return this.httpClient.put('http://localhost:3000/todos/'+id, data);
}
app.component.html 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应用程序.model.ts
This is model file这是 model 文件
export class Todo {
_id:any;
todos:any;
isDone:any;
}
backend api后端 api
This is the backedn function which i created to update my todo这是我为更新待办事项而创建的 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);
}
});
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
.我不确定我们是否相互理解,但您将
task
作为参数传递,但有两次您试图使用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
.它们不是一回事,如果
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
});
}
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.
如果 Angular 端没有错误,您必须检查后端端。
I solve this question to add [(ngModel)]="todo.isDone" in my checkbox input filed我解决这个问题以在我的复选框输入字段中添加 [(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>
And In my app.component.ts在我的 app.component.ts 中
updateTodo(task: any) {
this.todoService.updateData(task._id, task).subscribe(res => {
this.data = res;
console.log(res);
console.log(task);
}); }); }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.