無法將Django對象傳遞到有角前端

Question

我正在使用Django 2.1.5和Angular 7.3.1。 我有一個Django后端類DetailView，我正嘗試使用該類將對象傳遞給Angular前端。 我知道DetailView運行良好，因為使用Django渲染模板時可以看到該對象。 由於某種原因，我似乎無法通過Django API將其傳遞給Angular。

當我加載頁面時， dogdetail不會顯示任何內容，並且控制台會出現錯誤： DogdetailComponent.html:2 ERROR TypeError: Cannot read property 'name' of undefined at Object.eval [as updateRenderer]

我已經嘗試了幾種變體和語法等。我認為，如果Django API正確獲取了對象，那么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`);
}
}

dogdetail視圖django：

class DogDetailDjango(DetailView):
    model = Dog
    serializer_class = DogSerializer
    template_name = 'detail.html'

dogdetail.component.html

dogdetail works!

    {{ dogdetail }}


    <h1>{{ dogdetail.name }} </h1>

Answer 1

@SimonK有正確的答案，我只能在安裝適用於Google chrome的CORS插件后擺脫錯誤。 我首先嘗試創建正確的標題和所有內容，但只有在安裝了插件之后，我才停止出現錯誤，因此無法正常工作。