почему тип ng-select впереди вызывает проблемы с производительностью? - PullRequest
Новая
       3

почему тип ng-select впереди вызывает проблемы с производительностью?

0 голосов
/ 11 февраля 2020

Я использую ng-select с предварительной фильтрацией элементов в списке выбора. Когда вы печатаете для фильтрации результатов для первого элемента в списке, производительность молниеносна. Однако после выбора этого первого элемента все становится чрезвычайно медленным. Я не знаю rx js достаточно хорошо, чтобы понять, что является узким местом.

Мой шаблон: 

<label>Select Employees:</label>
<ng-select [items]="people$ | async"
           bindLabel="full_name"
           [multiple]="true"
           [addTag]="addCustomItem"
           [hideSelected]="true"
           [trackByFn]="trackByFn"
           [minTermLength]="2"
           [loading]="peopleLoading"
           typeToSearchText="Please enter 2 or more characters (of first OR last name)"
           [typeahead]="peopleInput$"
           [(ngModel)]="selectedPersons">
</ng-select>
<br>
<div style="margin-bottom:100px">Selected persons: {{selectedPersons | json}}</div>

Мой компонент Typescript: 

import { Component, OnInit } from '@angular/core';
import { concat, Observable, of, Subject } from 'rxjs';
import { Person, Employee } from './data.service';
import { catchError, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
import { NodeHTTPService } from '../../node-http.service';

@Component({
    selector: 'app-employee-picker',
    templateUrl: './employee-picker.component.html',
    styleUrls: ['./employee-picker.component.css']
})
export class EmployeePickerComponent implements OnInit {

people$: any/*Observable<Employee[]>*/;  // you can see I had an issue here.
peopleLoading = false;
peopleInput$ = new Subject<string>();
selectedPersons: Employee[];
addCustomItem: boolean = false;  // setting this to true allows users to add custom items not in the select list.

constructor(private _nodeHTTPService: NodeHTTPService) {
    }

ngOnInit() {
        this.loadPeople();
    }

trackByFn(item: Person) {
        return item.id;
    }

private loadPeople() {
        this.people$ = concat(
            of([]), // default items
            this.peopleInput$.pipe(
                distinctUntilChanged(),
                tap(() => this.peopleLoading = true),
                switchMap(term => this._nodeHTTPService.getUsers(term).pipe(
                    catchError(() => of([])), // empty list on error
                    tap(() => this.peopleLoading = false)
                ))
            )
        );
        console.log('this.people$: ', this.people$)
        }
    }

Служба NodeHttpService: 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CdfServiceService } from "./cdf-service.service";

@Injectable({
  providedIn: 'root'
})

export class NodeHTTPService {
  constructor(private http: HttpClient, private _cdfServiceService: CdfServiceService) { }

  getUsers(i) {
    if (!i) { i = ''};
    let users = this.http.get(`https://chq-smscqa01.chq.ei/db/users?user=${i}`)
    return users;
  }
}

Я действительно ценю любой вклад в это вопрос! Спасибо.

1 Ответ

1 голос
/ 11 февраля 2020

Для повышения производительности вы можете сделать сразу две вещи:

1) Реализовать перезапуск DOM с помощью виртуальной прокрутки.

Как указано в документации , вы можете установите для свойства ввода virtualScroll значение true, которое будет загружать только указанное количество элементов DOM, которое основано на высоте текущего контейнера прокрутки раскрывающегося списка ng-select.

2) Реализация нумерации страниц на вашей стороне сервера. Это уменьшит полезную нагрузку каждого HTTP-запроса, что сделает его более быстрым как для внешнего, так и для внутреннего интерфейса.

...