Adding delay in observable returns partial data in Angular rxjs

user_16289517 0
Viewed 66

In my code I need to add delay by using timer(500). But the issue is that it returns partial data. It is returning 2 fields while actual data has 17 fields. I have attached my code. please see it. Thank you

Returned value:

 ['booking_display_id', 'edit']

Expected value:

 ['booking_display_id', 'bookingstatus', 'b_contactname', 'member', 'b_emailaddress', 'b_mobilenumber', 'startdate', 'enddate', 'duration', 'bookingguest', 'guestnotes', 'vouchers', 'paypalpaymentpdt', 'totalCost', 'canPay', 'canCancel', 'edit']


 this.displayedColumns = combineLatest(this.table.columns.reduce((observables: Observable<boolean>[], col) => {
  // handle showIf property of column
  const show = col.showIf(this.injector, this.route.queryParamMap);
  observables.push(show instanceof Observable ? show : of(show));
  return observables;
}, []), timer(500)).pipe(
  map(showCols => {
    const cols = this.table.columns.filter((c, i) => showCols[i])
      .map(c => c.id);
    this.editEnabled && cols.push('edit');
    this.deleteEnabled && cols.push('delete');
    console.log('cols', cols)
    return cols;
  })
 );

rxjs angular typescript javascript
1 Answers

Your issue is that you pass an array of observables as well as another observable to the combineLatest. However it only takes an array of observables (1dimensional array). Therefor you need to either wrap your reduce with another combineLatest or spread them ( => [...obs, timer] obs would be your reduce) into one array.

This is your simplified current call

combineLatest([
    [of(1), of(2), of(3)],
    timer(500)
]);

I would recommend you use the spread operator to build a new array like so or you can use another combineLatest since it is another array of observables.

Also I recommend that you use delay instead of timer (delay runs only once)

If you want your values to be separated from the timer combineLatest([combineLatest(..obs), timer])

combineLatest([
    combineLatest([of(1), of(2), of(3)]),
    timer(500)
]).pipe(
    map(([yourValues, timer]) => {
        // ...
    })
)

If you do not want your values to be separated from the timer combineLatest([..obs, timer])

combineLatest([
    ...[of(1), of(2), of(3)],
    timer(500)
]).pipe(
    map(([yourValuesWithTimer]) => {
        // ...
    })
)
user_119415490
Related