Tengo un formulario en el que estoy trabajando con Angular JS. Este formulario tiene múltiples campos desplegables y campos de entrada que buscan a través de listas de datos. Estas listas de datos y campos desplegables se completan con datos de algunas API. Una de las listas de datos está llamando a una API que devuelve ~40,000 registros, por lo que al abrir este formulario, esta lista de datos con todos esos registros hace que la página tarde un poco en cargarse por completo. (No se puede comenzar a completar el formulario hasta que todo esté cargado)

¿Hay alguna manera de limitar los resultados que muestra esta lista de datos para mejorar el tiempo de carga y aún tener todos los registros disponibles para que un usuario los busque?

HTML:

 <div> <mat-form-field floatLabel="auto" class="frame-mat-input required"> <mat-label style="font-size: 14px;">PRIMARY CLIENT</mat-label> <input matInput type="text" list="client" (change)="saveCode3($event)"> <datalist id="client"> <option *ngFor="let pc of primClient" [value]="pc">{{pc}}</option> </datalist> </mat-form-field> </div>

Mecanografiado:

 //Call to get clients returns 40,000+ records getClients() { this.httpClient.get<any>('http://localhost:3000/client').subscribe( response => { // console.log(response[0]) for (let i = 0; i < response.length; i++) { if (response[i].Country == 'CA' && response[i].Status == 'A') { this.primClient.push(response[i].Name) } } } ) } primClient: any = []; //Filters through datalist based on user input. Way to limit results here to improve efficiency? public saveCode3(e: any): void { let find = this.primClient.find((x: { name: any; }) => x?.name === e.target.value); }