在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,