Question

我想对搜索输入进行反跳：

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>

同样，每次击键都会击中后端。

Answer 1

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

HTML

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

TS

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

Playground Sample

Answer 2

尝试使用本机脚本中的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;
}

如何在NativeScript Angular中消除SearchBar的反跳？

2 个答案: