Angular2でDjango REST APIにアクセスしようとしています

Question

私は、Angular2と残りのAPIを持つDjangoバックエンドを使用するプロジェクトに取り組んでいます。今は単にJSONオブジェクトをAngular2に送るためにdjangoバックエンドを取得しようとしています。何らかの理由で私たちがリクエストを出したとき、それは空白に戻ります。今はダミーのテスト関数を持っていますが、それでも機能しません。

/_services/user.service.ts

tempFunc() { 
    return this.http.get('http://localhost:8000/chains/', this.jwt()).map((model: Response) => model.json()); 
} 

/temptemp-page.component.ts

import { Router } from '@angular/router'; 

import { UserService } from '../_services/user.service'; 

export class Temp { 
    name : string; 
    description : string; 
    slogan : string; 
    founded_date : string; 
    website : string; 
} 


@Component({ 
    selector: 'app-temp-page', 
    templateUrl: './temp-page.component.html', 
    styleUrls: ['./temp-page.component.css'] 
}) 
export class TempPageComponent implements OnInit { 
    model: Temp; 


    constructor(
     private router: Router, 
     private userService: UserService) { } 

    ngOnInit() { 
     this.model = { 
      name: 'Wrong', 
      description: 'Wrong', 
      slogan: 'Wrong', 
      founded_date: 'Wrong', 
      website: 'Wrong', 
     } 

    this.userService.tempFunc().subscribe(model => this.model = model); 
    console.log(this.model); 
    } 

} 

間違っただけで私たちは何を取得しない場合、それが印刷されることがわかっていることです間違っていると私たちは取得要求が成功していないことを知っています。

一時-ページcomponenent.html

<div style="margin-left: 20px;"> 
    name: {{ this.model.name }} <br/> 
    description: {{ this.model.description }} <br/> 
    slogan: {{ this.model.slogan }} <br/> 
    founded_date: {{ this.model.founded_date }} <br/> 
    website: {{ this.model.website }} <br/> 
    <hr/> 
</div> 

Djangoのバックエンドは、チェーンと呼ばれるテーブルには、このHTMLファイルで、前述の種類のフィールドを持つモデルを持っています。そのURLで指定します。何らかの理由で、それを呼び出すすべての試みが機能します。 Angular2を除いて、これは、構文が間違っているのか、それとも問題に関連しているのかを判断するよう求めています。私は

curl -g localhost:8000/chains/ 

を行うとき、私はangular2コードをしようとすると、それはしかし、正常に動作し、200 204

のジャンゴ・サーバ上の成功事例のコードで

[{"name":"Cafe Amazing","description":"Founded to serve the best sandwiches.","slogan":"The best cafe in the Mississippi!","founded_date":"2014-12-04T20:55:17Z","website":"http://www.thecafeamazing.com"}] 

を返すので、それが動作します知っています上のコードは同じコードを返しますが、何も表示されません。私はここで間違って何をしていますか？

Answer 1

このように、テンプレートの使用にのみプロパティ名をthisを使用しないでください：

<div style="margin-left: 20px;"> 
    name: {{ model.name }} <br/> 
    description: {{ model.description }} <br/> 
    slogan: {{ model.slogan }} <br/> 
    founded_date: {{ model.founded_date }} <br/> 
    website: {{ model.website }} <br/> 
    <hr/> 
</div> 

あなたはtempFuncが非同期であるので、console.log(this.model)が最初に実行されます。

：

this.userService.tempFunc().subscribe(model => this.model = model); 
    console.log(this.model); 

は、これを行います

this.userService 
    .tempFunc() 
    .subscribe(model =>{ 
     this.model = model 
     console.log(this.model); 
    });