Observable 订阅中的变量获取空值

Question

I know that Observables take some time to get data while javascript keeps running the others codes and that is troubling me a lot.

I have used ngrx in my angular project. Here, I am trying to fetch some data from the store which is working fine. Then, I convert this data stream into string[] which is also working fine. To use this string[] me subscribe to this observable. And inside subscription I try to assign the value to other values named filterSizeValues .

Here, the problem comes. If I console.log this filterSizeValues initially I got and empty array. When the observable finishes his job filterSizeValues variable is filled with data.

But I can not effort filterSizeValues variable to be empty array initially. What can I do?

I have already searched the solution in the internet but nothing is working out.

Help me out please. And Many Many Thanks in advance.

Here is my code;

this.sizeTargetingStore$.dispatch(SizeTargetingActions.getSizeTargeting({
        campaignId: this.campaignId,
        lineItemId: this.lineItemId
      }));

Here I am accessing the store to get data.

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

Here, I am trying to set the filter values.

I also tried this way also.

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

But all ways filters set to an empty array. Anyone can help me out please?

Answer 1

Normally when I subscribe to something that I am waiting on to return what I do is I set up a Subject:

  private componentDestroyed$ = new Subject<void>();

then in the Observable piping and subscription I do it as:

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

Answer 2

From my understanding, you have 2 possibilities, either filter out the empty values or skip the first value. You can do so with the filter and skip rxjs operator respectively.

Also I believe that you are misusing the switchMap operator, since you are not using asynchronous operations within your switchMap we can use the map operator instead, so below I have a simplified version of your code with your 2 options to fix your problem.

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

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