Question

这是我用来学习MEAN CRUD操作的教程的链接。

根据要求，我发布了以下相关代码。此外，Chrome控制台还显示TypeError：无法读取未定义的属性“_id” 在todo-list.component.ts：56。

todolist.component.ts

<mat-list-option checkboxPosition="before"></mat-list-option>

这里是todo-list.component.html

import { Component, OnInit } from '@angular/core';
import { TodoService } from '../todo.service';
@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  todos:any[] = [];
  todo:any = {};
  todoToEdit:any = {};
  todoToDelete:any = {};
  apiMessage:string;
constructor(private todoService:TodoService) { }
ngOnInit(): void {
    this.todoService.showAddTodoBox = true;
    this.todoService.getTodos()
                    .then(td => this.todos = td.todos )
  }
AddTodo(todo:any):void{
    if(!todo){ return; }
    this.todoService.createTodo(todo)
                    .then(td => {
                      console.log(td);
                      this.todos.push(td.todo);
                    })
  }
showEditTodo(todo:any):void{
    this.todoToEdit = todo;
    this.apiMessage = "";
  }
EditTodo(todo:any):void{
    if(!todo){ return; }
    todo.id = this.todoToEdit._id;
    this.todoService.updateTodo(todo)
                    .then(td => {
                      const updatedTodos = this.todos.map(t => {
                        if(td.todo._id !== t._id){
                          return t;
                        }
                        return { ...t, ...td.todo };
                      })
                      this.apiMessage = td.message;
                      this.todos = updatedTodos;
                    })
  }
showDeleteTodo(todo:any):void{
   this.todoToDelete = todo;
   this.apiMessage = "";
 }
DeleteTodo(todo:any):void{
   if(!todo){ return; }
   this.todoService.deleteTodo(todo)
                   .then(td => {
                     const filteredTodos = this.todos.filter(t => t._id !== td.todo._id);
                     this.apiMessage = td.message;
                     this.todos = filteredTodos;
                   })
 }
}

Answer 1

如评论中所述;你可以使用你要删除的待办事项来解决它。它可以通过closure获得。

您可以查看todoService.deleteTodo解析的内容，并查看已删除的待办事项的ID是否可用。

要使用关闭todo的已删除待办事项的ID，您可以执行以下操作：

const filteredTodos = this.todos.filter(t => t._id !== todo._id)

确认删除后无法读取未定义的属性'_id'在MEAN CRUD应用程序中？

1 个答案: