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

Question

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

Answer 1

你应该处理ngModelChange角度事件（见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

我会使用表单控件来公开valueChanges可观察对象。每次表单控件的值发生更改时，都会发出此可观察对象。

<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;
        })
}

有了这个，你就可以控制调用api调用的频率（debounceTime＆distinctUntilChanged）并确保api调用完成的顺序（switchMap）。这是一个stack blitz演示这个。