用户触发方法的最佳实践'；s以angular2输入

我有这样一个场景：期望用户的输入，并使用它从服务器

\u http.get（）

。 我已尝试使用

keyup

事件，但无法管理。非常感谢您的推荐

我的模板：

<div class="col-md-8">
   <input type="text" class="form-control" [(ngModel)]="workOrder" (keyup)="populate()" placeholder="{{ 'FIELDS.PMS_IFR_WO' | translate }}"/>
</div>

---

您正在查找

ngModelChange

：

<div class="col-md-8">
    <input type="text" class="form-control" [ngModel]="workOrder" (ngModelChange)="populate($event)" placeholder="{{ 'FIELDS.PMS_IFR_WO' | translate }}"/>
</div>

---

ngModelChange

通常是一个不错的选择

<input type="text" class="form-control" 
    [(ngModel)]="workOrder" 
    (ngModelChange)="populate()" 
    placeholder="{{ 'FIELDS.PMS_IFR_WO' | translate }}"/>

---

如果您正在寻找最佳实践，请尝试RxJs。 模板

<input #searchBox type="text" class="form-control" [(ngModel)]="workOrder" (keyup)="populate(searchBox.value)" placeholder="{{ 'FIELDS.PMS_IFR_WO' | translate }}"/>

组成部分

import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import { Subject }    from 'rxjs/Subject';
import { of }         from 'rxjs/observable/of';

import {
   debounceTime, distinctUntilChanged, switchMap
 } from 'rxjs/operators';

searchResult : Observable<any>;
private searchTerms = new Subject<string>();

ngOnInit(): void {
this.searchResult = this.searchTerms.pipe(
  // wait 300ms after each keystroke before considering the term
  debounceTime(300),

  // ignore new term if same as previous term
  distinctUntilChanged(),

  // switch to new search observable each time the term changes
  switchMap((term: string) =>   this._lookup.getIcrData(term)),
);
}

populate(term: string){
this.searchTerms.next(term);
}

从'@angular/core'导入{Component，OnInit}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Subject'导入{Subject}；
从“rxjs/observable/of”导入{of}；
进口{
去BounceTime、distinctUntilChanged、switchMap
}来自“rxjs/运营商”；
搜索结果：可见；
private searchTerms=新主题（）；
ngOnInit（）：void{
this.searchResult=this.searchTerms.pipe(
//每次击键后等待300毫秒，然后再考虑该术语
去BounceTime（300），
//如果与上一学期相同，则忽略新学期
distinctUntilChanged（），
//每次术语更改时切换到可观察的新搜索
switchMap（（term:string）=>this.\u lookup.getIcrData（term）），
);
}
填充（术语：字符串）{
this.searchTerms.next（术语）；
}

谢谢！它很好，但还不是很好。如果用户输入数字999，它将触发3次。最后，我只想使用final值（ex999），并想知道如何触发final值为的方法argument@ClaudiuUngureanu查看页面底部Prithivi Raj的答案。

<input #searchBox type="text" class="form-control" [(ngModel)]="workOrder" (keyup)="populate(searchBox.value)" placeholder="{{ 'FIELDS.PMS_IFR_WO' | translate }}"/>

import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import { Subject }    from 'rxjs/Subject';
import { of }         from 'rxjs/observable/of';

import {
   debounceTime, distinctUntilChanged, switchMap
 } from 'rxjs/operators';

searchResult : Observable<any>;
private searchTerms = new Subject<string>();

ngOnInit(): void {
this.searchResult = this.searchTerms.pipe(
  // wait 300ms after each keystroke before considering the term
  debounceTime(300),

  // ignore new term if same as previous term
  distinctUntilChanged(),

  // switch to new search observable each time the term changes
  switchMap((term: string) =>   this._lookup.getIcrData(term)),
);
}

populate(term: string){
this.searchTerms.next(term);
}