尝试在 Angular2 中访问 Django REST API

Question

我正在做一个项目，我们使用 Angular2 和一个带有 rest API 的 Django 后端。现在我们只是试图让 django 后端将 JSON 对象发送到 Angular2。出于某种原因，当我们发出 get 请求时，它返回为空白。现在我们只有虚拟测试函数，但即使是那些也不起作用。

/_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 只是为了知道如果我们什么也没得到，它会打印 Wrong 并且我们知道 get 请求没有成功。

临时页面组件.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 文件中有一个具有上述类型字段的模型，在一个名为 Chains 的表中。在指定的 URL。出于某种原因，每次尝试调用它都有效。除了 Angular2，我要求它找出是否只是语法错误，或者与问题相关的其他问题。我知道它有效，因为当我这样做时

curl -g localhost:8000/chains/

它工作正常并返回

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

在 200 204 的 django 服务器上使用成功代码。

但是，当我尝试上面的 angular2 代码时，它返回相同的代码，但没有显示任何内容。我在这里做错了什么？

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