无法将 django 对象传递给 Angular 前端答案

【问题标题】：cannot pass django object to angular front end无法将 django 对象传递给 Angular 前端
【发布时间】：2019-02-25 01:11:44
【问题描述】：

我正在使用 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>

【问题讨论】：

你的 HTML 是什么样子的？获取狗详细信息的 HTTP 查询的结果是什么（可以使用开发者控制台的“网络”选项卡进行检查）？
你能显示DogDetailDjango 代码吗？没有它，我们无法检查它是否返回错误。
你好，我添加了 DogDetailDjango，http 查询导致我上面描述的错误？你问的是这个吗？
@ratrace123，您在控制台中看到的错误来自 HTML，是因为您试图访问尚未定义的元素上的属性。最可能的原因是您试图在对后端的异步调用完成之前读取 HTML 中的对象。它根本没有暗示 API 调用是否成功或它可能返回的内容。这就是为什么我要求查看 HTML 以及根据浏览器调用 API 的实际结果。
@ratrace123，错误是 100% 相关的。这意味着您的服务器没有启用 CORS，这基本上意味着您不能从不同的 Origin（包括不同的端口！）请求资源。您需要在这里做的是使用 django 查找启用 CORS（我没有使用 django 的相关经验，因此无法真正提供帮助）。这个包看起来可能会有所帮助：pypi.org/project/django-cors-headers

标签： python django angular

【解决方案1】：

@SimonK 有正确的答案，我只能在为谷歌浏览器安装 CORS 插件后才能摆脱错误。我首先尝试创建正确的标头和所有内容，但它不起作用，只有在我安装插件后我才停止出错。

【讨论】：