使用带有同步数据承诺的 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;
            }
    });
  }

我尝试将所有链部分放入一个新的承诺中，然后在 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);
                            }
                        }
                    );
            })

使用带有同步数据承诺的 lodash 链

Use lodash chain with a promise to synchronize data

typescript

lodash

angular-promise

angular