Utiliser la chaîne lodash avec la promesse de synchroniser les données

Question

J'essaie sans succès d'enchaîner les manipulations de chaînes en utilisant la chaîne lodash et de promettre. Mon réfColors.length est toujours 0, je ne saisis jamais l'instruction if car le service est appelé après le test de l'instruction.

Ce que je tente de le faire dans ma fonction

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; 
      } 
    }); 
    } 

je tente de mettre toute la partie de la chaîne dans une nouvelle promesse et alors() je lance mon Componant mais mon Componant est lancée sans données

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

Je résolus mon problème en lançant mon Componant après la souscription et l'utilisation du robinet() après le dernier forEach est exécuté comme ceci:

   .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); 
          } 
         } 
        ); 
      })