Angular 将承诺分配给第7节中的接口

我想从角度7的物体上得到这个值

我正在从服务类中的以下http get调用接收数据：

  async getSelectedRatecard(id: number): Promise<Ratecard> {
      return await this.http.get<Ratecard>('http://localhost:8080//shipmentRate/' + id)
      .toPromise();
  }

目前，selectedRatecard的类型为：

selectedRatecard: any;

我的目标是selectedRatecard的类型为Ratecard，这是一个界面：

export interface Ratecard{

    carrierId: number,
    ucarrierName: string,
    customsClearanceCosts: number,
    flegtSurcharge: number,
    hsCodeCharge: number,
    provisionForPrePaidDutiesFactor: number,
     prepaidCustomsDuty: number,
     deliveryOrder: number,
     inspectionCharges: number,
     lsps20feet: number,
     lsps40feet: number,
     lastmileCtvrede: number,
     ocmFee: number
   

}

我之所以要这样做，是因为现在我无法使用例如

this.selectedRatecard[carrierId]

进行注释。这将使我得到未定义的打印

当I console.log（此.selectedRatecard）时，将打印以下内容：

ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
__zone_symbol__state: true
__zone_symbol__value:
carrierId: 3
carrierName: "Hapag-Lloyd Rotterdam"
customsClearanceCosts: 68
deliveryOrder: 40
flegtSurcharge: 55
hsCodeCharge: null
inspectionCharges: 15
lastmileCtvrede: 94
lsps20feet: 15
lsps40feet: 15
ocmFee: 100
prepaidCustomsDuty: null
provisionForPrePaidDutiesFactor: null
__proto__: Object
__proto__: Object

但是我想用下面的方式打印它，这样我就可以访问对象中的值。 这是Postman中http get调用返回的wat get：

{
    "carrierId": 3,
    "carrierName": "Hapag-Lloyd Rotterdam",
    "customsClearanceCosts": 68.0,
    "flegtSurcharge": 55.0,
    "hsCodeCharge": null,
    "provisionForPrePaidDutiesFactor": null,
    "prepaidCustomsDuty": null,
    "deliveryOrder": 40.0,
    "inspectionCharges": 15.0,
    "lsps20feet": 15.0,
    "lsps40feet": 15.0,
    "lastmileCtvrede": 94.0,
    "ocmFee": 100.0
}

你有两个选择-

选项1（使用

。然后使用
回调）
setCarrier（id:number）{
这个.ratecardService.getSelectedRatecard（id）。然后（数据=>{
this.selectedRatecard=数据；
this.updateCurrentValue（）；
});
}

选项2（使用
异步等待
）
async setCarrier（id:number）{
this.selectedRatecard=等待此.ratecardService.getSelectedRatecard（id）；
this.updateCurrentValue（）；
}


改进
顺便说一下，您的服务方法中不需要
asyncwait
。你可以简单地回报你的承诺-

getSelectedRatecard（id:number）：承诺{
返回此文件。http
.get（'http://localhost:8080//shipmentRate/“+id）
.toPromise（）；
}

例1
但如果要在返回之前执行某些操作，则可以使用
async wait
-

异步getSelectedRatecard（id:number）：承诺{
const data=wait this.http
.get（'http://localhost:8080//shipmentRate/“+id）
.toPromise（）；
//只是返回之前的一些数据操作的一个示例
data.foo='bar'；
返回数据；
}

例2
另一个例子可以是-

出口等级费率卡{
carrierId：数字；
ucarrierName：字符串；
海关清理费用：数量；
弗莱格：数字；
HSC充电：数字；
Prepaid Duties的准备金系数：数字；
PrePaid CustomsDuty：编号；
交货订单：编号；
检查费用：数量；
LSPS20英尺：数字；
LSPS40英尺：数字；
lastmileCtvrede：编号；
ocmFee:号码
foo:string；
构造函数（数据？：任何）{
数据=数据|{}；
this.carrierId=data.carrierId；
this.ucarierName=data.ucarierName；
//其他属性也一样
}
doFooBar（）{
this.foo='bar'；
}
}

异步getSelectedRatecard（id:number）：承诺{
const data=wait this.http
.get（'http://localhost:8080//shipmentRate/“+id）
.toPromise（）；
常数费率卡=新费率卡（数据）；
rateCard.doFooBar（）；
退还差饷卡；
}

对于选项2：我已经在服务类的实际http get请求中使用了async和Wait。在setCarrier方法中是否也需要这样做？这些选项如何确保selectedRatecard是Ratecard类型？使用选项2，它对我有效！我一直很惊讶。谢谢。@KaiHoogenhoud我更新了答案并添加了代码改进，您可以应用。

{
    "carrierId": 3,
    "carrierName": "Hapag-Lloyd Rotterdam",
    "customsClearanceCosts": 68.0,
    "flegtSurcharge": 55.0,
    "hsCodeCharge": null,
    "provisionForPrePaidDutiesFactor": null,
    "prepaidCustomsDuty": null,
    "deliveryOrder": 40.0,
    "inspectionCharges": 15.0,
    "lsps20feet": 15.0,
    "lsps40feet": 15.0,
    "lastmileCtvrede": 94.0,
    "ocmFee": 100.0
}