javascript - 仅在所有过程完成后如何显示对象？

Question

我正在将数据显示到卡片中。大约有12张卡片。所以我正在尝试将所有卡片内容收集到一个对象中，一旦所有数据都推送到对象，然后将其呈现给卡片。

这是我尝试过的代码：

public cardObj: {} = {};
loadData() {
    this.cardObj["card_1"] = {
        a: selectedProductRow["aa"],
        b: selectedProductRow["bb"],
        c: selectedProductRow["cc"],
    };
    this.calculateYTDRate(salid, prvid);
    console.log("filters", this.cardObj);
}

calculateYTDRate(salid: string, prvid: number) {
    this.boService.getYTDRate(salid, prvid)
        .subscribe((res) => {
            let keys = Object.keys(res.data);

            //card 2
            let c2 = res.data[keys[0]].sumturn;

            this.cardObj["card_2"] = {
                year: `YTD ${keys[0]}`,
                value: this.nFormatter(c6),
            };


            let c3 = res.data[keys[1]].sumturn;
            this.cardObj["card_3"] = {
                year: `YTD ${keys[1]}`,
                value: this.nFormatter(c7),
            };


            this.cardObj["card_4"] = {
                growthYTD: (((c7 / c6) - 1) * 100).toFixed(2) + '%'
            };
        },
            (err) => {
                console.log("Error calculating YTD Rate" + err);
            }
        );
}

这里“card_1”被快速推送到cardObj，而calculateYTDRate() 中的其他卡需要大约2-3 分钟来计算并推送到对象。

即使此函数在后台运行，console.log("filters", this.cardObj) 也会执行哪些渲染卡。

我想在我所有的卡片都被推送到对象后执行这个控制台。

我该如何解决这个问题？

标签： javascriptangular5