Quiero usar la búsqueda inteligente en 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); Luego en 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())); } } );Entonces, la idea es obtener los nombres del flujo de datos y luego completar el menú desplegable. Sin embargo, a veces no funciona. Supongo que el orden de transmisión es incorrecto. Necesitamos obtener this.names primero. ¿Cómo cambiar el código?
Sería bueno saber qué es s1 -- s3 ..
Pero, en general, debe refactorizar esto para que los resultados sean un dependiente observable de leadForm.valueChanges.
Algo como:
this.results$ = this.leadForm.valueChanges.pipe(map(...));Su problema aquí es que suscribe 2 observables y espera que el orden esté definido, pero puede haber estos casos para AMBOS: nunca se resuelve, uno de ellos se resuelve primero (último respectivamente), hay un error. Para darte mas consejos necesitaria saber mas del caso.. :/
Parece que necesita un enfoque más reactivo en el que declare variables para sus Observables y reaccione a los cambios en esas variables.
Sin el código exacto, es difícil obtener un ejemplo exacto para usted, pero algo como esto:
names$ = this.http.get(...); leadForm$ = this.leadForm.valueChanges(); results$ = combineLatest([names$, leadForm$]).pipe( map(([names, r]) => names.filter(c => c.toLowerCase().includes(r.toLowerCase())) );Esto debería acercarte.
Luego puede suscribirse a results$ en algún lugar o vincularse directamente a él mediante una canalización asíncrona.
Tengo un ejemplo de esta técnica aquí: https://www.youtube.com/watch?v=0EefbG6N3vY
Y si tiene una suscripción a Pluralsight, hay un recorrido completo aquí: https://app.pluralsight.com/course-player?clipId=5732473c-ac12-450d-930c-096a687dd2d0