python - 无法将 django 对象传递给 Angular 前端
问题描述
我正在使用 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>
解决方案
@SimonK 有正确的答案,我只能在为谷歌浏览器安装 CORS 插件后才能摆脱错误。我首先尝试创建正确的标头和所有内容,但它不起作用,只有在我安装插件后我才停止出错。
推荐阅读
- javascript - 如何从事件本身以外的地方调用 HTML 上的事件
- c# - 检查列表中已删除的插槽
- html - 如何在我的菜单栏上实现这种动画下划线效果?
- swift - 从 Firebase 和 UITableView 中删除时索引超出范围
- html - 没有协议和域如何创建锚点?
- php - 如何正确禁用用户的 Wordpress 注销确认?
- aws-lambda - Node.js 从 dynamoDB 获取项目并传递变量
- r - R正则表达式:匹配两个单词彼此靠近的字符串,但有异常
- neo4j - neo4j 连接有困难
- c# - 通过覆盖 BlazorComponent.BuildRenderTree(RenderTreeBuilder builder) 创建组件