Итак, я попытался интегрировать Angular 2 в качестве интерфейса для моего приложения Django, и у меня есть проблема, когда при попытке создать запрос GET, Angular 2 бросает мне эту ошибку (не удалось скопировать & пасту по причинам форматирования):Ошибка Django & Angular 2 {_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());
}
}
Джанго 1.9.6, Угловое 2 Beta 17, Python 3.4.3
Любые предложения?
Спасибо за ответ, я сделал то, что вы предложили, и это, кажется, является шагом в правильном направлении, однако ошибка, которую я получаю, теперь говорит: TypeError: Невозможно прочитать свойство getData 'undefined'. Какие-либо предложения? – Hybrid
Я добавил плункер для вашего дела – yurzui
Я не знаю, кто вы. Я не знаю, откуда вы. Но, пожалуйста, будь у меня. Вы сэр - чемпион. – Hybrid