Отображение данных с символами '_' из Flask API с помощью Angular
Я пытаюсь собрать компоненты из моего 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 и хочу отобразить те же данные в виде списка. Я получаю значения только для тех, у кого нет символа «_» в названии модели 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. Спасибо
Ответы 1
Есть пакет angular под названием 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;
};
и в вашем сервисе angular вы конвертируете 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,