Der Versuch, auf Django REST API in Angular2 zuzugreifen

Question

Ich arbeite an einem Projekt, in dem wir Angular2 und ein Django-Backend verwenden, das eine Rest-API hat. Im Moment versuchen wir einfach, das Django-Backend dazu zu bringen, JSON-Objekte an Angular2 zu senden. Aus irgendeinem Grund, wenn wir Anfragen erhalten, kommt es leer zurück. Im Moment haben wir nur Dummy-Testfunktionen, aber selbst diese funktionieren nicht.

/_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); 
    } 

} 

The Wrong ist es, dass nur wissen, ob wir nichts bekommen, wird es drucken Falsch und wir wissen, dass die Anfrage nicht erfolgreich ist.

temp-Seite-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> 

Das django Backend hat ein Modell mit dem Feld des eingangs genannten Art in dieser HTML-Datei, in einer Tabelle namens Ketten. bei dieser URL angegeben. Aus irgendeinem Grund funktioniert jeder Versuch, es zu nennen. Mit Ausnahme von Angular2, und ich frage dies, ob es nur eine schlechte Syntax oder etwas anderes gibt, das mit dem Problem zusammenhängt. Ich weiß, dass es funktioniert, weil, wenn ich

curl -g localhost:8000/chains/ 

tun es gut funktioniert und gibt

[{"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"}] 

mit einem Sucess-Code auf dem Server django von 200 204.

jedoch, wenn ich den Code angular2 versuchen darüber gibt es die gleichen Codes zurück, aber nichts wird angezeigt. Was mache ich hier falsch?

Answer 1

nicht verwenden this in Ihrer Vorlage Verwendung nur der Name der Eigenschaft, wie folgt aus:

<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> 

Sie tempFunc asynchron ist so wird console.log(this.model) zuerst ausgeführt werden:

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

dies tun:

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