使用帶有承諾的lodash鏈同步數據

Question

我正在嘗試使用lodash鏈和promise進行字符串操作，但沒有成功。 我的refColors.length始終為0，我從不輸入if語句，因為在測試該語句后將調用該服務。

我在工作中嘗試做的事情

initiateModalData(refColorList: any) {

    refColorList.forEach((values, index) => {
        const listRefRows: Array<GblRowValues> = [];
        const initialcolors: Array<any> = [];
        const refColors: Array<any> = [];
        const headList: Array<any> = [];
        this.rowId = 1;

         _(value)
                .chain()
                .tap((colors) => {
                    this.myAPIService.getStyle(colors[index].id)
                        .subscribe(styleRef => {
                            if (styleRef) {
                                styleRef.colors.map(color => {
                                    refColors.push(color.colorId);
                                });
                            }
                        });
                })
                .forEach(refSize => {
                    refSize.headList.forEach(item => {
                        headList.push({
                            size: item.size,
                            value: 0
                        });
                    });
                })
                .forEach(val => {
                    initialcolors.push(val.color);
                })
                .forEach((row) => {
                    this.rowId += 1;
                    listRefRows.push(new rowValue(row.headList, initialcolors, this.rowId));
                })
                .value();

            const factory = this.componentFactoryResolver.resolveComponentFactory(ReferenceTableComponent);
            const ref = this.target.createComponent(factory);
            console.log(refColors.length)
            ref.instance.listRows = listRefRows;
            ref.instance.rowId = this.rowId;
            ref.instance.headList = _.uniqBy(headList, 'size');
            if (_.difference(refColors, initialcolors).length !== 0) {
                ref.instance.colors = _.difference(refColors, initialcolors);
                ref.instance.isAddRowValid = true;
            }
    });
  }

我試圖將所有鏈部分放到一個新的Promise中，然后在then（）中啟動我的組件，但是我的組件在沒有數據的情況下啟動

return new Promise((resolve, reject) => {
      _(value)
                .chain()
                .tap((colors) => {
                    this.myAPIService.getStyle(colors[index].id)
                        .subscribe(styleRef => {
                            if (styleRef) {
                                styleRef.colors.map(color => {
                                    refColors.push(color.colorId);
                                });
                            }
                        });
                })
                .forEach(refSize => {
                    refSize.headList.forEach(item => {
                        headList.push({
                            size: item.size,
                            value: 0
                        });
                    });
                })
                .forEach(val => {
                    initialcolors.push(val.color);
                })
                .forEach((row) => {
                    this.rowId += 1;
                    listRefRows.push(new rowValue(row.headList, initialcolors, this.rowId));
                })
                .value();

})
  .then (() => {
     const factory = this.componentFactoryResolver.resolveComponentFactory(ReferenceTableComponent);
            const ref = this.target.createComponent(factory);
            console.log(refColors.length)
            ref.instance.listRows = listRefRows;
            ref.instance.rowId = this.rowId;
            ref.instance.headList = _.uniqBy(headList, 'size');
            if (_.difference(refColors, initialcolors).length !== 0) {
                ref.instance.colors = _.difference(refColors, initialcolors);
                ref.instance.isAddRowValid = true;
            }
  })

Answer 1

我通過在訂閱后初始化組件並在執行最后一個forEach之后使用tap（）來解決我的問題，如下所示：

                .tap((colors) => {
                this.myAPIService.getStyle(colors[index].id)
                    .subscribe(styleRef => {
                            if (styleRef) {
                                styleRef.colors.map(color => {
                                    refColors.push(color.colorId);
                                });
                            }
                        },
                            error => this.myNotificationService.error(`${error} !`, 'error'),
                        () => {
                            const factory = this.componentFactoryResolver.resolveComponentFactory(ReferenceTableComponent);
                            const ref = this.target.createComponent(factory);
                            ref.instance.listRows = listRefRows;
                            ref.instance.rowId = this.rowId;
                            ref.instance.headList = _.uniqBy(headList, 'size');
                            if (_.difference(refColors, initialcolors).length !== 0) {
                                ref.instance.colors = _.difference(refColors, initialcolors);
                            }
                        }
                    );
            })