Hey there! I’ve run into this exact issue before, so let’s break down why you’re seeing that error even though the delete operation is successfully removing the item from your database.

The Root Cause #

The problem almost always boils down to a mismatch between what your backend is returning and what your frontend is expecting. Your database is deleting the todo just fine, but when your frontend tries to process the response from the delete API call, it’s getting undefined instead of the deleted object it’s looking for.

Step 1: Fix Your Backend Controller #

First, let’s check your todos.controller.js delete endpoint. If you’re using Mongoose, methods like findByIdAndDelete don’t return the deleted document by default (in newer Mongoose versions) unless you specify the right option.

Example of the Problematic Code

// This might be your current code - it deletes but doesn't return the object
Todo.findByIdAndDelete(req.params.id, (err) => {
  if (err) return res.status(500).send(err);
  res.status(200).send(); // No data sent back to frontend
});

Fixed Backend Code

Update it to return the deleted document so your frontend has something to work with:

Todo.findByIdAndDelete(req.params.id, { returnDocument: 'before' }, (err, deletedTodo) => {
  if (err) return res.status(500).send(err);
  // Handle case where the todo doesn't exist
  if (!deletedTodo) return res.status(404).send({ message: 'Todo not found' });
  // Send the deleted todo back to the frontend
  res.status(200).send(deletedTodo);
});

If you’re using deleteOne instead, note that it returns a count of deleted items, not the document itself. Switch to findByIdAndDelete if you need the deleted object, or adjust your frontend logic to use the ID instead.

Step 2: Adjust Your Frontend Service & Component #

Now let’s make sure your todos.service.js and component are handling the response correctly.

Fix the Service’s Delete Method

If your service is trying to access a nested property that doesn’t exist (like res.data), that’ll cause undefined too. Adjust it to directly return the response body:

// todos.service.js
deleteTodo(id: string) {
  // Use Angular's type safety if you have a Todo interface
  return this.http.delete<Todo>(`/api/todos/${id}`);
}

Fix the Component’s Subscription

When you subscribe to the delete method, add a check to ensure you’re not trying to access properties on undefined:

// In your component
this.todoService.deleteTodo(todoId).subscribe(
  (deletedTodo) => {
    if (deletedTodo) {
      // Remove the deleted todo from your local array
      this.todos = this.todos.filter(t => t._id !== deletedTodo._id);
    } else {
      console.log('Todo not found in database');
    }
  },
  (error) => {
    console.error('Delete failed:', error);
  }
);

Alternative: If You Don’t Need the Deleted Object #

If you don’t want to return the deleted document from the backend, you can just send back the ID and filter your local array using that:

// Backend
Todo.findByIdAndDelete(req.params.id, (err) => {
  if (err) return res.status(500).send(err);
  res.status(200).send({ id: req.params.id });
});

// Frontend service
deleteTodo(id: string) {
  return this.http.delete<{ id: string }>(`/api/todos/${id}`).pipe(
    map(res => res.id)
  );
}

// Component subscription
this.todoService.deleteTodo(todoId).subscribe(deletedId => {
  this.todos = this.todos.filter(t => t._id !== deletedId);
});

Final Check #

After making these changes, test the delete operation again. The error should disappear because your frontend is now getting the data it expects (either the deleted object or its ID) to update the local state correctly.

内容的提问来源于stack exchange，提问作者BarniPro