Блог

Я делаю простой запрос на удаление из своего приложения angular, но ничего не происходит, и ошибка не появляется. Мой сервисный код выглядит следующим образом :

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class TodoService {

  todoUrl = 'https://example.herokuapp.com/api/todoDB/';

  constructor(private http: HttpClient) { }

  getTodo() {
    return this.http.get(this.todoUrl);
  }

  postTodo(todoObject: any) {
    return this.http.post(this.todoUrl , todoObject);
  }

  deleteTodo(id: any) {
    const url = `${this.todoUrl}${id}`;
    console.log(url);    // *** This is printing correct URL
    return this.http.delete(url);
  }

}
 

Мои getTodo() и postTodo() работают нормально, но метод deleteTodo() не работает, а также он также не показывает никаких ошибок. Когда я помещаю URL-адрес из console.log (url) в postman, он работает, но он не работает из моего приложения.Я использую следующий код в своем компоненте для доступа к методу deleteTodo () моего сервиса :

 removeTodo(i: any) {
    this.todoService.deleteTodo(this.todoArray[i]._id);
}
 

Мой маршрут удаления сервера :

 //  Delete Todo
router.delete('/:id' , (req , res) => {
    Todo.findById(req.params.id)
        .then((todo) => todo.remove().then(() => res.json({success : true})))
        .catch(err => res.json({success : false}).status(404))
});
 

Вам необходимо подписаться на наблюдаемый

Фрагмент кода для вашей проблемы:

 removeTodo(i: any) {
    this.todoService.deleteTodo(this.todoArray[i]._id).subscribe(e=>{
    // Callback
    // Perform Actions which are required after deleting the id from the TODO
    });
} 

Дополнительная ссылка:

https://www.pluralsight.com/guides/posting-deleting-putting-data-angular

https://angular.io/guide/http#making-a-delete-request

Измените свой код для поддержки catchError и throwError использования канала для отладки.

 import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
 

 deleteTodo(id: any) {
    const url = `${this.todoUrl}${id}`;
    return this.http.delete(url).pipe(
        catchError((err) => {
          console.log('error caught in service')
          console.error(err);
          return throwError(err);    //Rethrow it back to component
        })
      );
}