Отображение данных с символами '_' из Flask API с Angular

Question

Я пытаюсь собрать компоненты из своего 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 и хочу отобразить те же данные в виде списка. Я получаю значения только для тех без '_' в названии угловой модели. Например я получаю:

• id: 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, и он отобразит его в ваш модель. Я не уверен, что это все исправит, но похоже, что angular просто не нравится символы '_' в свойствах 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,