Как отобразить детали товара из django restframework в angular?

Я пытаюсь перейти к деталям моего продукта, но не получаю никакого ответа от моего api. Могу ли я получить вашу помощь?

django views:

class Product(generics.RetrieveAPIView):
    lookup_field = "slug"
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

django urls:

path("product/<slug>", views.Product.as_view(), name="product_detail"),

angular api.service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  baseurl = "http://127.0.0.1:8000"
  httpHeaders = new HttpHeaders({'Content-Type': 'application/json'})

  constructor(private http: HttpClient) { }

  getAllProducts(): Observable<any>{
    return this.http.get(this.baseurl +'/product/',
    {headers: this.httpHeaders})
  }
  getProductDetails(slug: string){
    return this.http.get(this.baseurl +'/product/'+ slug,
    {headers: this.httpHeaders})
  }


}

компоненты деталей прямоугольного изделия: ц -

export class GroceriesDetailsComponent implements OnInit {

  ProductId:any;
  ProductData:any = [];

  constructor(
    private service:ApiService) { }


  ngOnInit(): void {
    this.ProductId = this.actRoute.snapshot.params['id'];
    this.getProductDetails(this.ProductId);
  }

  getProductDetails(ProductId: string){
      
    this.service.getProductDetails(ProductId).subscribe(product=>{
      this.ProductData=product;
    });
  }

}

и html -

<div class="form-froup row">
  <p>{{ ProductData.title }}</p>
</div>

Вернуться на верх