[英]Displaying data with '_' characters from Flask API with Angular
I'm trying to build components from my flask API. 我正在尝试从我的flask API构建组件。 When I hit the route, I can see the data for the objects I want. 当我点击路线时,我可以看到所需对象的数据。 However, when I intreprolate in hopes to see it from my front end, I only see certain properties(the ones that have no '_' in their names). 但是,当我希望从前端看到它时,我只会看到某些属性(名称中没有 “ _”的属性)。
For example.. this is what I get when I hit the route .../measurements
: 例如..这就是我按路线.../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
},....
}
However when I integrate Flask with Angular and wish to display that same data a list. 但是,当我将Flask与Angular集成在一起并希望在列表中显示相同的数据时。 I only get values for those without any '_' in the angular model name. 我只得到角度模型名称中没有任何“ _”的值。 For example I get: 例如我得到:
id: 1 编号:1
Time: 2015-11-28T00:10:00+00:00 时间:2015-11-28T00:10:00 + 00:00
Wind Speed: 风速:
Wind Direction: 风向:
Wind Dispersion: 风散:
Availability:100 可用性:100
Measurement point id: 测量点编号:
My model on Flask app looks like this.. 我在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
And the model on my angular app is: 我的角度应用程序上的模型是:
export class AggregatedMeasurement {
constructor(
public id: number,
public time: Date,
public windSpeed: number,
public windDirection: number,
public windSpeedDispersion: number,
public availability: number,
) { }
}
I ended up using marshmallow for object serialization/deserialization. 我最终使用棉花糖进行对象序列化/反序列化。 And this is how schema looks. 这就是架构的外观。
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()
Angular component.html
角度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>
I made the flask models with such names to keep python naming practices. 我用这样的名称创建了烧瓶模型,以保持python命名惯例。 I just attempted changing the angular model to have names match the flask model and schema so.. instead of public windSpeed
to public wind_speed
, cleared my cache and restarted the servers... and it's still only displaying the ones from earlier. 我只是尝试更改角度模型以使其名称与烧瓶模型和架构匹配,因此..而不是将public windSpeed
更改为public wind_speed
,清除了我的缓存并重新启动了服务器...而且它仍然只显示早期版本的服务器。
This is my first time using Angular/ using Flask API.. Thanks 这是我第一次使用Angular /使用Flask API。
There's an angular package called json2typescript... Run npm install json2typescript and import it into your app.module.ts and in your angular model you can add a JsonProperty that says what the json property is and it will map it to your model. 有一个名为json2typescript的角度包...运行npm install json2typescript并将其导入到您的app.module.ts中,然后在您的角度模型中可以添加一个JsonProperty,上面写着json属性是什么,它将映射到您的模型。 I'm not positive this will fix it, but it seems angular just doesn't like '_' characters in the json properties so maybe it will work: 我不是很确定这会解决问题,但似乎有角度的只是不喜欢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;
};
and in your angular service you convert the json to your typescript model with: 在您的角度服务中,您可以通过以下方式将json转换为打字稿模型:
this.http.get(someUrl).map(response => {
let jsonConvert: JsonConvert = new JsonConvert();
let measurementObject: AggregatedMeasurementSchema = jsonConvert.deserializeObject(response, AggregatedMeasurementSchema);
})
and in your tsconfig.json you might have to add this to your compiler options: 并可能需要在tsconfig.json中将其添加到编译器选项中:
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.