Django＆Angular 2 Error {_dataService：undefined}

Question

私はDjangoアプリケーションのフロントエンドとしてAngular 2を統合しようとしましたが、GET要求を作成しようとするとAngular 2がこのエラーを投げます（フォーマット上の理由&ペーストをコピーできませんでした）：

これらは、我々はこの軌道に乗るために使用する3つのファイルです：

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()); 
    } 
} 

ジャンゴ1.9.6、角度2ベータ17、パイソン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