javascript - 在 Angular 中使用 debounceTime

Question

我想使用 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);
    }
}

但是这段代码对我不起作用。

有什么问题吗？我该如何解决这个问题？

它告诉我这个错误:

ERROR in src/app/shared/components/user-mutli-select-search/user-mutli-select-search.component.ts(117,4): error TS2345: Argument of type '(x: Observable) => void' is not assignable to parameter of type 'OperatorFunction'. Type 'void' is not assignable to type 'Observable<{}>'.

Answer 1

打字 fromEvent如fromEvent<KeyboardEvent>为我解决了这个问题。