Sé que los Observables tardan un tiempo en obtener datos mientras javascript sigue ejecutando los otros códigos y eso me preocupa mucho.
He usado ngrx en mi proyecto angular. Aquí, estoy tratando de obtener algunos datos de la tienda que funcionan bien. Luego, convierto este flujo de datos en string[] que también funciona bien. Para usar esta string[] , subscribe a este observable. Y dentro de la suscripción trato de asignar el valor a otros valores llamados filterSizeValues .
Aquí viene el problema. Si console.log este filterSizeValues inicialmente obtuve una matriz vacía. Cuando el observable termina su trabajo, la variable filterSizeValues se llena con datos.
Pero no puedo esforzarme por que la variable filterSizeValues sea una matriz vacía inicialmente. ¿Que puedo hacer?
Ya he buscado la solución en internet pero nada funciona.
Ayúdame por favor. Y Muchas Muchas Gracias de antemano.
Aquí está mi código;
this.sizeTargetingStore$.dispatch(SizeTargetingActions.getSizeTargeting({ campaignId: this.campaignId, lineItemId: this.lineItemId }));Aquí estoy accediendo a la tienda para obtener datos.
this.sizeTargeting$ .pipe(switchMap(sizes=>{ let temporary:string[] = []; sizes.forEach(eachSize=>{ temporary.push(eachSize.name); }) this.filterSizeValues$ = of(temporary); return this.filterSizeValues$; })) .subscribe(size_name=>{ this.filters.set('size_name', size_name); }) Aquí, estoy tratando de set los valores de filtro.
También probé de esta manera también.
this.sizeTargeting$ .pipe(switchMap(sizes=>{ let temporary:string[] = []; sizes.forEach(eachSize=>{ temporary.push(eachSize.name); }) this.filterSizeValues$ = of(temporary); return this.filterSizeValues$; })) .subscribe(size_name=>{ this.filterSizeValues = size_name }) this.filters.set('size_name', this.filterSizeValues);Pero todos los filtros de formas se establecen en una matriz vacía. ¿Alguien me puede ayudar por favor?
Normalmente, cuando me suscribo a algo que estoy esperando para regresar, lo que hago es configurar un Asunto:
private componentDestroyed$ = new Subject<void>();luego, en la tubería Observable y la suscripción, lo hago como:
this.sizeTargeting$ .pipe(takeUntil(this.componentDestroyed$)) .subscribe((sizes: YourTypeHere[]) => { if(sizes) { //Do what I need to do with my sizes here, populate what I need, //dispatch any other actions needed. } })Según tengo entendido, tiene 2 posibilidades, filtrar los valores vacíos u omitir el primer valor. Puede hacerlo con el filter y skip el operador rxjs respectivamente.
También creo que está haciendo un mal uso del operador switchMap , ya que no está usando operaciones asincrónicas dentro de su switchMap , podemos usar el operador de map en su lugar, así que a continuación tengo una versión simplificada de su código con sus 2 opciones para solucionar su problema.
Opción 1:
this.sizeTargeting$.pipe( filter(sizes => sizes.length > 0), // filter out empty array values map(sizes => sizes.map(size => size.name)) // perform your remap ).subscribe(sizes => { this.filterSizeValues = size_name; // Only arrays with values will reach this step });Opcion 2:
this.sizeTargeting$.pipe( skip(1), // skip the first value map(sizes => sizes.map(size => size.name)) // perform your remap ).subscribe(sizes => { this.filterSizeValues = size_name; // Only arrays with values will reach this step });