Использование debounceTime в angular - PullRequest
Новая
       3

Использование debounceTime в angular

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

Я хочу использовать debounceTime для отправки запроса на сервер после 300 миллисекунд нажатия клавиши.

Я использую этот код: 

GetUsers(): void {
    let value = document.getElementById('search-box');
    this.cdRef.detectChanges();

    if (this.subscription) {
        this.subscription.unsubscribe();
    }

    value = this.searchValue.toString();

    const typeahead = fromEvent(value, 'input').pipe(
        map((e: KeyboardEvent) => (e.target as HTMLInputElement).value),
        filter(text => text.length > 2),
        debounceTime(10),
        distinctUntilChanged(),
        x => {
            if (value.startsWith('@')) {
                this.searchTitle = 'GENERAL.USER_NAME';
                const val = value.slice(1);
                if (val.length > 0) {

                    this.getWithUserName(val, this.page);

                }
            } else if (value.startsWith('+9')) {

                this.searchTitle = 'GENERAL.PHONE_NUMBER';
                this.GetWithPhoneNumber(this.searchValue, this.page);

            } else if (!value.startsWith('@') && !value.startsWith('+9')) {
                this.searchTitle = 'GENERAL.NAME';
                this.GetWithDisplayName(value, this.page);

            }
        }
    );
    this.cdRef.detectChanges();
}

, и это код HttpClient для отправки запроса на сервер: 

getWithUserName(value: string, page: number): void {
    this.loading = true;
    this.cdRef.detectChanges();
    this.subscription = this.userPublicService
        .getUserByUserName(value, page, this.appConfig.dropdownPageSize)
        .pipe(debounceTime(30000),
            distinctUntilChanged())
        .subscribe(data => {
            this.users = data['records'];
            this.totalCount = data['totalCount'];
            this.cdRef.detectChanges();
            this.loading = false;
            this.ValidateshowBtn();
        });
    if (this.userId > 0) {
        this.selectedUserById(this.userId);
    }
}

Но этот код у меня не работает.

В чем проблема? Как я могу решить эту проблему?

это показывает мне эту ошибку:

ОШИБКА в src / app / shared / components / user-mutli-select-search / user-mutli- select-search.component.ts (117,4): ошибка TS2345: Аргумент типа '(x: Observable) => void' не может быть назначен параметру типа 'OperatorFunction'. Тип 'void' нельзя назначить типу 'Observable <{}>'.

1 Ответ

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

Функция, которая начинается с x => { должна быть внутри tap() или в subscribe().

...