如何在 NativeScript Angular 中消除 SearchBar 的抖动？答案

【问题标题】：How to debounce SearchBar in NativeScript Angular?如何在 NativeScript Angular 中消除 SearchBar 的抖动？
【发布时间】：2019-02-09 06:36:30
【问题描述】：

我想去抖动搜索输入：

export class SearchComponent implements OnInit {

    onTextChanged(args) {
        let searchBar = <SearchBar>args.object;

        if (searchBar.text) {
            this.updateResults(searchBar.text);
        } else {
            this.results = new ObservableArray();
        }
    }

    updateResults(q) {
        // hit api
    }
}


<SearchBar (textChange)="onTextChanged($event)"></SearchBar>

因为每次击键都会点击后端。

【问题讨论】：

标签： nativescript angular2-nativescript

【解决方案1】：

使用 FromControl 并在 valueChanges 订阅中添加 debounceTime 运算符。确保你也导入了ReactiveFormsModule。

HTML

<SearchBar [formControl]="searchControl" class="input"></SearchBar>

this.subscription = this.searchControl.valueChanges
        .pipe(debounceTime(500))
        .subscribe((value) => {
            console.log(value);
        });

Playground Sample

【讨论】：

【解决方案2】：

在 nativescript 中尝试使用 SearchBar。

HTML：-

<SearchBar class="form-input search-barHead" [text]="searchPhrase" 
(loaded)="searchBarLoaded($event)"
  textFieldHintColor="#ffffff" textFieldBackgroundColor="#02637E" height="40" 
  hint="Search TCP" (clear)="onAllSearchClear($event)" (submit)="onAllSearchSubmit($event)">

打字稿：-

Public searchPhrase:any;

public searchBarLoaded(args) {
    let searchBar = <SearchBar>args.object;
    if (searchBar.android) {
        searchBar.android.clearFocus();
    }
}

public onAllSearchClear(args) {
    let searchBar = <SearchBar>args.object;
    let searchProduct = searchBar.text;
}

public onAllSearchSubmit(args) {
    let searchBar = <SearchBar>args.object;
    let searchProduct = searchBar.text;
}

【讨论】：