0
所以我试图将Angular 2作为我的Django应用程序的前端,并且我有一个问题,当我尝试创建GET请求时,Angular 2会引发此错误(无法复制粘贴&格式化的原因):Django&Angular 2 Error {_dataService:undefined}
这些都是我们用它来得到这个正在进行的三个文件:
HTML
{% extends 'profile/base_profile.html' %}
{% load humanize_tags %}
{% load article_tags %}
{% load staticfiles %}
{% block body %}
{% include '_includes/_article-modal-container.html' %}
<div class="container" style="border:1px solid #bfbfbf">
<!-- Load depedencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/http.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/router.dev.js"></script>
<!-- User defined component -->
<http-app></http-app>
<script>
System.config({
transpiler: 'typescript',
packages: {
app: {
format: 'register',
defaultExtension: 'ts'
}
}
});
System.import('{% static '_dev/a2_get_post/app.component.ts' %}')
.then(null, console.error.bind(console));
</script>
</div>
{% endblock body %}
app.component.ts
//import the Component and bootstrap from angular
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {DataService} from './data.service.ts';
import {error} from "util";
import {HTTP_PROVIDERS} from "angular2/http";
import {Injectable} from 'angular2/core'
@Component({
selector: 'http-app',
template: `
<div>
<div class="input">
<label for="title">Title</label>
<input type="text" id="title" #title>
</div>
<div class="input">
<label for="body">Body</label>
<input type="text" id="body" #body>
</div>
<div class="input">
<label for="user-id">User ID</label>
<input type="text" id="user-id" #userId>
</div>
<button (click)="onPost(title.value, body.value, userId.value)">Post Data</button>
<button (click)="onGetPosts()">Get All Posts</button>
<p>Response: {{response}}</p>
</div>
`,
providers: [DataService]
})
@Injectable()
export class AppComponent{
response: string;
constructor (private _dataService: DataService) {
console.log('Constructor:');
console.log(this);
console.log('');
}
onPost(title: string, body: string, userId: string) {
console.log('onPost:');
console.log(this);
console.log('');
const data = {
title: title,
body: body,
userId: userId
};
this._dataService.postData(data)
.subscribe(
data => this.response = JSON.stringify(data),
error => console.log(error)
);
}
onGetPosts() {
console.log('onGetPosts:');
console.log(this);
console.log('');
this._dataService.getData()
.subscribe(
data => {
response = JSON.stringify(data);
},
error => console.error(error)
)
}
}
bootstrap(AppComponent, [HTTP_PROVIDERS]);
data.service.ts
import {Injectable} from "angular2/core";
import {Http, Headers} from "angular2/http";
import 'rxjs/Rx';
import {Observable} from "rxjs/Observable";
@Injectable()
export class DataService {
constructor (private _http: Http) {
}
postData(data: any): Observable<any> {
const body = JSON.stringify(data);
const headers = new Headers();
headers.append('Content-Type', 'application/json');
return this._http.post('<REMOVED>', body, {headers: headers})
.map(response => response.json());
}
getData(): Observable<any> {
console.log(this);
return this._http.get('<REMOVED>')
.map(response => response.json());
}
}
Django的1.9.6,角2贝塔17,Python的3.4.3
有何建议?
谢谢你的回答,我做了你的建议,它似乎是朝着正确方向迈出的一步,然而,我现在得到的错误说'TypeError:不能读取未定义的属性'getData'。有什么建议么? – Hybrid
我已经为你的情况添加了蹲跳者 – yurzui
我不知道你是谁。我不知道你从哪里来。但是,请给我点赞。你先生是冠军。 – Hybrid