Smart search is not working when working with mergeMap-CodePudding

I want to use smart search in angular

<input type="text" [formControl]="leadForm" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let item of results" [value]="item">
   {{item}}
   </mat-option>
</mat-autocomplete>

leadForm = new FormControl(null, Validators.required);

Then in ngOnInit()

 combineLatest([s1,s2,s3])
 .pipe(
 mergeMap(([r1, r2, r3]) => {
     this.x = r1;
     this.y = r2;
     this.names = r3;
     return of(1);
 }))
 .subscribe(() => {
     // display
 });
 this.leadForm.valuesChanges.subscribe(
     r => {
       if(r !== '') {
           this.results = this.names.filter(c => c.toLowerCase().includes(item.toLowerCase()));
       }
    }
 );

So the idea is to get the names from data stream then populate the dropdown. However sometimes it is not working. I guess that the stream order is wrong. We need to get this.names first. How to change the code?

CodePudding user response：

Would be nice to know what s1 -- s3 is..

But in general you should refactor this so that results is an observable dependent on leadForm.valueChanges.

Something like:

this.results$ = this.leadForm.valueChanges.pipe(map(...));

Your problem here is that you subscribe 2 observables and expect that the order is defined, but there can be these cases for BOTH: it never resolves, one of them resolves first(last respectively), there is an error. To give you more advice I would need to know more about the case.. :/

CodePudding user response：

Sounds like you need a more reactive approach where you declare variables for your Observables and react to changes in those variables.

Without the exact code, it's hard to get an exact example for you, but something like this:

names$ = this.http.get(...);

leadForm$ = this.leadForm.valueChanges();

results$ = combineLatest([names$, leadForm$]).pipe(
     map(([names, r]) => names.filter(c => c.toLowerCase().includes(r.toLowerCase()))
);

This should get you close.

You can then subscribe to results$ somewhere or bind directly to it using an async pipe.

I have an example of this technique here: https://www.youtube.com/watch?v=0EefbG6N3vY

And if you have a Pluralsight subscription, there is a complete walk through here: https://app.pluralsight.com/course-player?clipId=5732473c-ac12-450d-930c-096a687dd2d0