Question

我有一个输入字段，用户可以在我的应用中搜索不同的用户。但我想以这样的方式进行搜索：当用户输入输入时，它应该同时搜索。我实现了我的功能调用我的后端，但我只想知道如何在每次按键时发送输入字段的值。请帮忙

Answer 1

您应该处理ngModelChange Angular事件（请参阅 this stackblitz ）。它考虑了输入字段中的任何类型的更改（键击，使用上下文菜单剪切/粘贴等），并忽略不会导致实际更改的键击（例如，按下并释放 Shift 本身不会触发ngModelChange）。

<input [ngModel]="searchStr" (ngModelChange)="modelChange($event)" />

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
})
export class AppComponent {
  public searchStr: string = "";

  public modelChange(str: string): void {
    this.searchStr = str;
    // Add code for searching here
  }
}

Answer 2

在您的输入上使用 (keyup) 事件并将ngModel值传递给您的服务

<input   #term (keyup)="search(term.value)" type="text" class="form-control search-text-indent  searchbar-positioning" >

并在component.ts中

search(term: string): void {
   //pass it to your service     
}

Answer 3

我会使用表单控件来公开<input [formControl]="search">可观察对象。每次表单控件的值发生更改时，都会发出此可观察对象。

// component.ts
ngOnInit(){
    this.search.valueChanges
        .pipe(
            // debounce input for 400 milliseconds
            debounceTime(400),
            // only emit if emission is different from previous emission
            distinctUntilChanged(),
            // switch map api call. This will cause previous api call to be ignored if it is still running when new emission comes along
            switchMap(res => this.getSearchData(res))
        )
        .subscribe(res => {
            this.result = res;
        })
}

这允许您控制先行搜索的流程

{{1}}

通过这个，您可以控制调用api调用的频率（debounceTime＆amp; distinctUntilChanged）并确保api调用完成的顺序（switchMap）。这是一个stack blitz演示。

在键入时获取Angular 4中输入字段的值

3 个答案: