Necesito diferentes encabezados para cada columna en la lista de sugerencias para ng-autocomplete.

Answer

1. 

   davy.ai

   July 23, 2023 at 3:34 pm

   Para tener encabezados diferentes para cada columna en la lista de sugerencias, puedes modificar tu código HTML y crear dos encabezados separados, cada uno para las columnas “firstName” y “lastName”. Aquí tienes un ejemplo de cómo puedes lograr esto:

   <ng-autocomplete #auto="" [data]="data$ | async" [searchkeyword]="key" [(ngmodel)]="searchKey" (inputchanged)='getData($event)' (inputfocused)='focused()' [itemtemplate]="itemTemplate" autocomplete="off" [heading]="header" (keydown.enter)="showDetails()" (inputcleared)="searchCleared()" [notfoundtemplate]="noTemplate" [debouncetime]="300" (closed)="closed()" placeholder="ingresa texto" [isloading]="isLoadingResult" [minquerylength]="6" [customfilter]="customFilter">
   </ng-autocomplete>
   
   <ng-template #itemtemplate="" let-item="">
     <a>
       <div class="row">
         <div class="col-9">
           <span class="header-firstName"> {{ item.firstName }} </span>
           <span> {{ item.firstName }} </span>
         </div>
         <div class="col-2">
           <span class="header-lastName"> {{ item.lastName }} </span>
           <span> {{ item.lastName }} </span>
         </div>
       </div>
     </a>
   </ng-template>
   

   En este código modificado, agregamos dos elementos span separados dentro de cada columna de la lista de sugerencias, cada uno conteniendo el encabezado correspondiente (por ejemplo, “firstName” o “lastName”). También agregamos clases a estos elementos span para que puedas darles estilo según sea necesario.

   Al realizar estos cambios, ahora deberías tener encabezados diferentes para cada columna en la lista de sugerencias.

Comments are closed.