在角度中使用 debounceTime答案

【问题标题】：Using debounceTime in angular在角度中使用 debounceTime
【发布时间】：2020-06-02 02:30:26
【问题描述】：

我想在按键 300 毫秒后使用debounceTime 向服务器发送请求。

我使用这个代码：

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'。

【问题讨论】：

您需要进一步调试它以隔离确切“什么不工作”。您可能已经这样做了，但是“所有这些对我都不起作用”太含糊了。有什么作用？它有什么作用？问题出在哪里？将其缩小到确切的问题和最小的复制者。
@JoshWulf 它告诉我这个错误。我更新问题
好的，太好了！那么您发布的代码中的 (117) 是哪一行？
angular-2-training-book.rangle.io/http/search_with_switchmap

标签： javascript angular typescript rxjs

【解决方案1】：

将fromEvent 输入为fromEvent<KeyboardEvent> 为我解决了这个问题。

【讨论】：

【解决方案2】：

以x => { 开头的函数应该在tap() 或subscribe() 中。

【讨论】：

..或者返回一个 Observable。