javascript - Django 和 Angular 2 错误 {dataService : undefined}

Question

所以我尝试将 Angular 2 集成为我的 Django 应用程序的前端，但我遇到了一个问题，当我尝试创建 GET 请求时，Angular 2 向我抛出此错误(由于格式原因无法复制和粘贴) ):

这是我们用来实现此操作的三个文件:

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/typescript@1.7.5/lib/typescript.js"></script>
<script src="https://npmcdn.com/systemjs@0.19.8/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、Angular 2 Beta 17、Python 3.4.3

有什么建议吗？

Answer 1

尝试使用变量 this._dataService 代替类型 DataService

this._dataService.postData(data)
 .subscribe(
      data => this.response = JSON.stringify(data),
      error => console.log(error)
);

this._dataService.getData()
  .subscribe(
    data => {
        response = JSON.stringify(data);
    },
    error => console.error(error)
)

另请参阅相应的 plnkr https://plnkr.co/edit/WemJ7qotAISH1mBvraiD?p=preview