Мне нужно удалить любой объект из моей DRF / django подключенной базы данных через angular 13

Я получаю идентификатор, который мне нужно удалить, но последняя строка service.ts, которая является методом удаления, не выполняется...

Файлы и фрагменты кода, которые я использовал, следующие: -

COMPONENT.HTML

<li *ngFor="let source of sources$ | async | filter: filterTerm">
       <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{source.name}}</h5>
          <p>URL:- <a href ='{{source.url}}'>{{source.url}}</a></p>
          <a class="btn btn-primary" href='fetch/{{source.id}}' role="button">fetch</a>

           <button class="btn btn-primary" (click)="deleteSource(source.id)">delete </button>
           <br>
        </div>
            </div>


</li>

Я попытался консолидировать получение id из html и Id, который я получаю, правильный. //component.ts

export class SourcesComponent implements OnInit {
  filterTerm!: string;
  sources$ !: Observable<sources[]>;
//   deletedSource !: sources;

  constructor(private sourcesService: SourcesService) { }

//  prepareDeleteSource(deleteSource:  sources){
//   this.deletedSource = deleteSource;
//  }

  ngOnInit(): void {
    this.Source();
  }

  Source(){
    this.sources$ = this.sourcesService.Sources()
      }

  deleteSource(id : string){
  console.log(id)
    this.sourcesService.deleteSource(id);
    }

//service.ts

export class SourcesService {
API_URL = 'http://127.0.0.1:8000/sourceapi';

constructor(private http: HttpClient) { }
//   let csrf = this._cookieService.get("csrftoken");
//   if (typeof(csrf) === 'undefined') {
//     csrf = '';
//   }
     /** GET sources from the server */
    Sources() :  Observable<sources[]> {
      return this.http.get<sources[]>(this.API_URL,);
    }
      /** POST: add a new source to the server */

    addSource(source : sources[]): Observable<sources[]>{
      return this.http.post<sources[]> (this.API_URL, source);
      //console.log(user);
      }

    deleteSource(id: string): Observable<number>{
    let httpheaders=new HttpHeaders()
    .set('Content-type','application/Json');
    let options={
      headers:httpheaders
    };
     console.log(id)
     return this.http.delete<number>(this.API_URL +'/'+id)


  }
}
Функции

Angular HTTP возвращают холодные наблюдаемые. Это означает, что this.http.delete<number>(this.API_URL +'/'+id) будет возвращать наблюдаемую, которая ничего не будет делать, пока кто-нибудь не подпишется на нее. Таким образом, не будет выполнен ни один HTTP-вызов, поскольку никто не будет наблюдать за результатом.

Если вы не хотите использовать результат этого вызова, у вас есть различные варианты запуска подписки.

  1. просто вызовите subscribe на наблюдаемой:
deleteSource(id : string){
  console.log(id)
  this.sourcesService.deleteSource(id).subscribe();
}
  1. Преобразуйте его в обещание и ожидайте его (или не ожидайте, если это не нужно), используя lastValueFrom:
async deleteSource(id : string){
  console.log(id)
  await lastValueFrom(this.sourcesService.deleteSource(id));
}
Вернуться на верх