Я использую Django 2.1.5 и Angular 7.3.1.У меня есть бэкэнд-класс Django DetailView, который я пытаюсь использовать для передачи объекта в Angular.Я знаю, что DetailView работает нормально, потому что я могу видеть объект при рендеринге шаблона с помощью Django.По некоторым причинам я не могу передать его Angular через API Django.
Когда я загружаю страницу, ничего не отображается для dogdetail, и в консоли появляется ошибка: DogdetailComponent.html:2 ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateRenderer]
Я пробовал несколько вариантов и синтаксис и т. Д. Я думаю, что если DjangoAPI получает объект правильно, чем Angular должен иметь возможность забрать его из конечной точки API.
Я использовал Postman для доступа к конечной точке API http://127.0.0.1:8000/1/dogdetail/, и я получил объект dog, и я могу получить доступ к его атрибутам.
Мой django urls.py:
from django.urls import path
from .views import DogList, DogDetailDjango, index
urlpatterns = [
path('', index, name='index'),
path('dogs/', DogList.as_view(), name='doglist'),
path('<int:pk>/dogdetail/', DogDetailDjango.as_view(), name='dogdetail'),
]
dogdetail.component.ts:
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service'
import { Dog } from '../dog'
@Component({
selector: 'app-dogdetail',
templateUrl: './dogdetail.component.html',
styleUrls: ['./dogdetail.component.scss']
})
export class DogdetailComponent implements OnInit {
dogdetail : Dog[];
constructor(private apiservice: ApiService) { }
ngOnInit() {
this.getDog();
}
getDog(): void {
this.apiservice.getDogDetail().subscribe(dogdetail=> this.dogdetail = dogdetail)
console.log(this.dogdetail);
}
}
api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http"
import { DogListComponent } from './dog-list/dog-list.component';
import { Dog } from './dog'
import { Observable, of } from 'rxjs'
@Injectable({
providedIn: 'root'
})
export class ApiService {
apiURL: string = 'http://127.0.0.1:8000'
constructor(private httpClient: HttpClient) { }
public getDogDetail(): Observable<Dog[]> {
return this.httpClient.get<Dog[]>(`${this.apiURL}/1/dogdetail`);
}
}
вид собачьего хвоста django:
class DogDetailDjango(DetailView):
model = Dog
serializer_class = DogSerializer
template_name = 'detail.html'
dogdetail.component.html
dogdetail works!
{{ dogdetail }}
<h1>{{ dogdetail.name }} </h1>