Angular Observable chaining : How to Unsubscribe this explicitly

Question

I have a chain of Array of Observables :

for ( i=0;i<10;i++)
{
observableA$[i] = /*...*/;
observableB$[i] = observableA$[i].pipe(
  // ...
);
observableC$[i] = observableB$[i].pipe(
  // ...
);
observableD$[i] = observableB$[i].pipe(
  // ...
);
observableE$[i] = /*...*/;
observableF$[i] = combineLatest([observableD$[i], observableE$[i]]).pipe(
  // ...
);

I dnt want to show row at Index i=2,3 for certain condition , so now if i do :

<ng-container *ngFor="let er of observableA$; let i=index">             
                       <td>
                           {{ observableA$[i] | async }} 
                       </td>

        <ng-container>

So now row 2 and 3 should not be visible for certain case.

NOTE: I don't want to do hide and unhide that row i.e display : none and block keeping the row in Async Observable.

How to remove that row from Async Observable and reattach Observable?

I am doing this , so that my further Observables i.e

ObservableFilterA (which is dependent on observableA)
ObservableFilterB (which is dependent on observableB)
ObservableFilterC (which is dependent on observableC)
ObservableFilterD (which is dependent on observableD)

[which is a filter for Dropdown on each column]

which are dependent on these Observables values , should not consider these values for processing

for example ObservableFilterA:

this.ObservableFilterA$ = observableA$.pipe(    
     map((res:number[]) => {
       const data = res.filter(function(item, pos){
         return res.indexOf(item)== pos; 
       });

       return data;
     })
);

NOw ObservableFilterA$ Observable should not consider observableA$ , those values which are not required for further processing

Hope you are clear of the questions, sorry if i m yet not clear , if you want i can explain further

I dnt want Obervable :ObservableA on that particular row any more , so that my Other Observable :ObservablesB which are built on that ObservableA , should not consider that row to get data in template — , Nov 05 '19 at 02:08
I have explained more , kindly let me know if i m clear or not kindly help me if you can — , Nov 05 '19 at 02:26

Rafi Henig · Answer 1 · 2019-11-05T02:51:39.330

0

I'm not sure if I understood your question correctly. let me know if I didn't, how about this?

<ng-container *ngIf="observableA | async">
  <ng-container *ngFor="let item of (observableB$ | async)">
    <td>
      {{ item }}
    </td>
  </ng-container>
<ng-container>

I didn't understand whether you were implementing table or drop-down

edited Nov 05 '19 at 02:51

answered Nov 05 '19 at 01:26

Rafi Henig

5,950
2
16
36

https://stackoverflow.com/questions/58704078/angular-observable-chaining – Nov 05 '19 at 03:33
can you check this question – Nov 05 '19 at 03:33

Angular Observable chaining : How to Unsubscribe this explicitly

1 Answers1