Python 使用Angular 4解析Django REST API响应

我使用Django Restapiframework构建了Django REST API，它使用序列化程序返回json响应：

from rest_framework import serializers
from .models import WeatherStatistics

class WeatherStatisticsSerializer(serializers.ModelSerializer):

    class Meta:
        model = WeatherStatistics
        fields = '__all__'

在我的Angular 4前端项目中，我有一项服务：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class WeatherstatsService {

  constructor(private http:Http) {
    console.log("Hello World");

    this.getWeatherData();
    // this.getWeatherDataRecords();
  }

  weatherdata: any = {};

  private _WeatherStatsUrl = 'http://127.0.0.1:8000/weatherstats/weatherdata';

  getWeatherData() {
    return this.http.get(this._WeatherStatsUrl)
      .map((res:Response) => res.json);
  }

  getWeatherDataRecords() {
    this.getWeatherData().subscribe(weatherdata => {
      console.log(weatherdata)
    })
  }
}

我还有一个使用该服务的组件：

import { Component, OnInit } from '@angular/core';
import { WeatherstatsService } from '../weatherstats.service';

@Component({
  selector: 'weather-stats',
  templateUrl: './weather-stats.component.html',
  styleUrls: ['./weather-stats.component.css']
})
export class WeatherStatsComponent implements OnInit {

  data: any;

  constructor(private weatherstatsservice: WeatherstatsService) { }

  ngOnInit() {

    this.data = this.weatherstatsservice.getWeatherData();
  }

}

---

目前，我只想让它将json数据从api记录到控制台oninit。到目前为止，它什么也没做。如何将Django中的json转换成Angular？

首先，您尚未订阅http调用，并且无法以同步方式设置异步数据，您需要这样做：

this.weatherstatsservice.getWeatherData().subscribe(data => this.data = data);

其次，您有一个输入错误，.json是一个函数，可以这样调用它

.map((res:Response) => res.json());

---

首先，您尚未订阅http调用，无法以同步方式设置异步数据，您需要这样做：

this.weatherstatsservice.getWeatherData().subscribe(data => this.data = data);

其次，您有一个输入错误，.json是一个函数，可以这样调用它

.map((res:Response) => res.json());

---

这是因为当它从后端返回时，您只是发出请求，而没有订阅它的值。如果您想从组件中获取数据，我建议您使用

在您的组件中

 this.weatherstatsservice.getWeatherData().subscribe(data => this.data = data);

---

或者从

服务

调用

this.weatherstatservice.getWeatherDataRecords（）

（但您无法确定它何时从

服务器

恢复，因此您应该对此进行观察，或者只使用第一种方法）然后从

服务

中获取数据，这是因为当它从后端返回时，您只是发出请求，而没有订阅它的值。如果您想从组件中获取数据，我建议您使用

在您的组件中

 this.weatherstatsservice.getWeatherData().subscribe(data => this.data = data);

---

或者从

服务

调用

this.weatherstatservice.getWeatherDataRecords（）

（但您无法确定它何时从

服务器

返回，因此您应该对此进行观察，或者只使用第一种方法），然后从

服务

获取数据。您是否能够调用django viewset，浏览器控制台中有错误吗？您可以调用django viewset吗？浏览器控制台中有错误吗？现在获取CORS错误吗？加载失败：从“”重定向到“”已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源代码“”。您需要在设置中将localhost:4200添加到允许的域中。p抱歉，我弄错了，我在django中处理CORS的方式始终是安装corsheaders（django CORS标头）并将其添加到CORS_ORIGIN_WHITELISTCool中-我可能会为此提出一个新问题，因为我不确定是否正确设置了restapi框架现在得到一个CORS错误？加载失败：从“”重定向到“”已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源代码“”。您需要在设置中将localhost:4200添加到允许的域中。p抱歉，我弄错了，我在django中处理CORS的方式始终是安装corsheaders（django CORS标头）并将其添加到CORS_ORIGIN_WHITELISTCool中-我可能会为此提出一个新问题，因为我不确定是否正确设置了restapi框架