Angular Material select no funciona en las opciones de filtrado.

Answer

1. 

   davy.ai

   May 29, 2023 at 2:01 pm

   Para evitar la desaparición de los elementos seleccionados (chips) al utilizar mat-select (multiple) junto con ngx-mat-select-search para buscar los elementos, se pueden implementar los siguientes ajustes en el código:

   1. En el archivo HTML, agregar un nuevo div debajo del elemento mat-select donde se mostrarán los elementos seleccionados como chips:

   <mat-form-field>
     <mat-select placeholder="Selecciona una opción" [(ngmodel)]="selectedOptions" [multiple]="true" [searchable]="true" [overlaypanelclass]="selectOverlayPanelClass">
       <ngx-mat-select-search [formcontrol]="optionFilter"></ngx-mat-select-search>
       <mat-option *ngfor="let option of filteredOptions | async" [value]="option">{{option}}</mat-option>
     </mat-select>
   </mat-form-field>
   <div>
     <mat-chip-list>
       <mat-chip *ngfor="let option of selectedOptions" [removable]="true" (removed)="removeOption(option)">
         {{ option }}
         <mat-icon matchipremove="">cancel</mat-icon>
       </mat-chip>
     </mat-chip-list>
   </div>
   

   1. En el archivo component.ts, agregar una nueva función para eliminar una opción seleccionada de la lista de opciones seleccionadas:

   removeOption(option: string): void {
     const index = this.selectedOptions.indexOf(option);
     if (index >= 0) {
       this.selectedOptions.splice(index, 1);
     }
   }
   

   1. En el mismo archivo, modificar la función onSearch para actualizar la lista de opciones seleccionadas con las nuevas opciones filtradas:

   onSearch(searchTerm: string): void {
     this.filteredOptions = this.options$.pipe(
       map(options => options.filter(option => option.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1))
     );
     this.selectedOptions = this.selectedOptions.filter(option => {
       return this.filteredOptionsMap.get(option).toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
     });
   }
   

   Al incorporar estos cambios, se puede evitar la desaparición de los elementos seleccionados (chips) en la lista cuando se filtran las opciones utilizando ngx-mat-select-search.

Comments are closed.