在Angular的Flask API中以'_'字符显示数据

Question

我正在尝试从我的flask API构建组件。 当我点击路线时，我可以看到所需对象的数据。 但是，当我希望从前端看到它时，我只会看到某些属性（名称中没有 “ _”的属性）。

例如..这就是我按路线.../measurements ：

[
  {
    "availability": 100.0, 
    "id": 1, 

    "time": "2015-11-28T00:10:00+00:00", 
    "wind_direction": 30, 
    "wind_speed": 1.41, 
    "wind_speed_dispersion": 0.22
  }, 
  {
    "availability": 100.0, 
    "id": 2, 

    "time": "2015-11-28T00:20:00+00:00", 
    "wind_direction": 30.4, 
    "wind_speed": 1.45, 
    "wind_speed_dispersion": 0.2
  }, 
  {
    "availability": 100.0, 
    "id": 3, 

    "time": "2015-11-28T00:30:00+00:00", 
    "wind_direction": 30.1, 
    "wind_speed": 1.01, 
    "wind_speed_dispersion": 0.2
  },....
} 

但是，当我将Flask与Angular集成在一起并希望在列表中显示相同的数据时。 我只得到角度模型名称中没有任何“ _”的值。 例如我得到：

• 编号：1

• 时间：2015-11-28T00：10：00 + 00：00

• 风速：

• 风向：

• 风散：

• 可用性：100

• 测量点编号：

我在Flask应用上的模型如下所示。

class AggregatedMeasurement(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    created = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)

    time = db.Column(db.DateTime, nullable=False)
    wind_speed = db.Column(db.Float, nullable=False)  # in m/s
    wind_direction = db.Column(db.Float, nullable=False)  # in degrees
    wind_speed_dispersion = db.Column(db.Float, nullable=False)  # in m/s

    availability = db.Column(db.Float, nullable=False)  # in percent

我的角度应用程序上的模型是：

export class AggregatedMeasurement {
    constructor(
        public id: number,
        public time: Date,
        public windSpeed: number,
        public windDirection: number,
        public windSpeedDispersion: number,
        public availability: number,

    ) { }
}

我最终使用棉花糖进行对象序列化/反序列化。 这就是架构的外观。

class AggregatedMeasurementSchema(Schema):
    id = fields.Int(dump_only=True)

    time = fields.DateTime()
    windSpeed = fields.Number()
    wind_direction = fields.Number()
    wind_speed_dispersion = fields.Number()
    availability = fields.Number()

角度component.html

  <ul *ngFor="let aggregatedMeasurement of aggregatedMeasurementsList">
      <li> id: {{ aggregatedMeasurement.id }} </li>
      <li> Time: {{ aggregatedMeasurement.time }} </li>
      <li> Wind Speed:{{ aggregatedMeasurement.windSpeed }} </li>
      <li> Wind Direction: {{ aggregatedMeasurement.windDirection }} </li>
      <li> Wind Dispersion:{{ aggregatedMeasurement.windSpeedDispersion }} </li>
      <li> Availability:{{ aggregatedMeasurement.availability }}  </li>
  </ul>

我用这样的名称创建了烧瓶模型，以保持python命名惯例。 我只是尝试更改角度模型以使其名称与烧瓶模型和架构匹配，因此..而不是将public windSpeed更改为public wind_speed ，清除了我的缓存并重新启动了服务器...而且它仍然只显示早期版本的服务器。

这是我第一次使用Angular /使用Flask API。

Answer 1

有一个名为json2typescript的角度包...运行npm install json2typescript并将其导入到您的app.module.ts中，然后在您的角度模型中可以添加一个JsonProperty，上面写着json属性是什么，它将映射到您的模型。 我不是很确定这会解决问题，但似乎有角度的只是不喜欢json属性中的'_'字符，因此也许可以工作：

import { JsonObject, JsonProperty } from 'json2typescript';

@JsonObject
export class AggregatedMeasurementSchema {
id: number = undefined;
time: Date = undefined;
windSpeed: number = undefined;
@JsonProperty('wind_direction')
windDirection: number = undefined;
@JsonProperty('wind_speed_dispersion')
windSpeedDispersion: number = undefined;
availability: number = undefined;
};

在您的角度服务中，您可以通过以下方式将json转换为打字稿模型：

this.http.get(someUrl).map(response => {
    let jsonConvert: JsonConvert = new JsonConvert();
    let measurementObject: AggregatedMeasurementSchema = jsonConvert.deserializeObject(response, AggregatedMeasurementSchema);
})

并可能需要在tsconfig.json中将其添加到编译器选项中：

"experimentalDecorators": true,
    "emitDecoratorMetadata": true,