angular - 在 Angular 7 中为接口(interface)分配 promise

Question

我正在尝试从 Angular 7 中的对象中获取值。
我从服务类中的以下 http get 调用接收数据:

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

所以这个调用返回一个 promise 。
我在以下调用中使用了这个 promise :

 setCarrier(id: number){
    this.selectedRatecard = this.ratecardService.getSelectedRatecard(id);
    this.updateCurrentValue();
  }

现在， selectedRatecard 的类型是 any:

selectedRatecard: any;

我的目标是 selectedRatecard 是 Ratecard 类型，它是一个接口(interface):

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] 进行注释。 .这将使我未定义打印。
当我 console.log(this.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:

{
    "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
}

Answer 1

你有两个选择——
选项 1(使用 .then 回调)

setCarrier(id: number) {
    this.ratecardService.getSelectedRatecard(id).then(data => {
            this.selectedRatecard = data;
            this.updateCurrentValue();
    });
}

选项 2(使用 async-await)

async setCarrier(id: number) {
    this.selectedRatecard = await this.ratecardService.getSelectedRatecard(id);
    this.updateCurrentValue();
}

改进
顺便说一句，你不需要 async-await在您的服务方法中。您可以简单地返回 promise -

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

示例 1
但是如果你想在返回之前执行一些操作，你可以使用 async-await -

async getSelectedRatecard(id: number): Promise<Ratecard> {
    const data = await this.http
        .get<Ratecard>('http://localhost:8080//shipmentRate/' + id)
        .toPromise();
    
    // Just an example of some data manipulation before returning
    data.foo = 'bar';
    return data;
}

示例 2
另一个例子可能是 -

export class 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

    foo: string;

    constructor(data?: any) {
        data = data || {};
        this.carrierId = data.carrierId;
        this.ucarrierName = data.ucarrierName;
        // Same for other properties
    }

    doFooBar() {
        this.foo = 'bar';
    }
}

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

    const rateCard = new Ratecard(data);
    rateCard.doFooBar();
    return rateCard;
}