Angular 角度4，如何延迟1秒更新[（ngModel）]

由于ngModel正在即时更新，如何设置延迟

  <input type="text" value="{{item.task_name}}" name="task_name" [(ngModel)]="item.task_name" (ngModelChange)="update_fields([item.task_name])" >

我需要通过调用update_fields（）保存任务_名称，延迟1秒，以避免即时调用服务

---

谢谢在

更新字段（）中添加延迟
方法

比如：

Rxjs和可观测对象是此类任务的完美候选对象！以下是如何实现这一目标的示例：

模板：

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component{(
  ...
)}
export class YourComponent {

  term$ = new Subject<string>();

  constructor() {
    this.term$
      .debounceTime(1000)
      .distinctUntilChanged()
      .switchMap(term => /*do something*/);
  }
}

<input type="text" [value]="item.task_name" (keyup)="term$.next($event.target.value)">

import ......

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

@Component{(
  ...
)}
export class YourComponent implements OnDestroy {

  term$ = new Subject<string>();

  private searchSubscription: Subscription;

  constructor() {
    this.searchSubscription = this.term$.pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      switchMap(term => {
        /*do something*/
        return EMPTY;
      })
    ).subscribe();
  }

  ngOnDestroy() {
    //remember to unsubscribe on destroy

    if (this.searchSubscription) {
      this.searchSubscription.unsubscribe();
      this.searchSubscription = null;
    }
  }
}



组件：

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component{(
  ...
)}
export class YourComponent {

  term$ = new Subject<string>();

  constructor() {
    this.term$
      .debounceTime(1000)
      .distinctUntilChanged()
      .switchMap(term => /*do something*/);
  }
}

<input type="text" [value]="item.task_name" (keyup)="term$.next($event.target.value)">

import ......

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

@Component{(
  ...
)}
export class YourComponent implements OnDestroy {

  term$ = new Subject<string>();

  private searchSubscription: Subscription;

  constructor() {
    this.searchSubscription = this.term$.pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      switchMap(term => {
        /*do something*/
        return EMPTY;
      })
    ).subscribe();
  }

  ngOnDestroy() {
    //remember to unsubscribe on destroy

    if (this.searchSubscription) {
      this.searchSubscription.unsubscribe();
      this.searchSubscription = null;
    }
  }
}

导入。。。。。。
从'rxjs/Subject'导入{Subject}；
导入'rxjs/add/operator/debounceTime'；
导入'rxjs/add/operator/distinctUntilChanged'；
导入'rxjs/add/operator/switchMap'；
@组成部分{(
...
)}
导出类组件{
术语$=新主题（）；
构造函数（）{
这个学期$
.debounceTime（1000）
.distinctUntilChanged（）
.switchMap（term=>/*做点什么*/）；
}
}

subject
是一种既作为可观察对象又作为观察者的对象类型，这意味着您可以订阅它并从中发出值（使用
next（）
）

debounceTime
等待提供的时间（毫秒），直到允许进行新的更改

distinctUntilChanges
将不允许同一输入在一行中传递两次

switchMap
从链中获取最新的可观察值，因此您不会一次获得多个结果
这里有一个解决方案，可用于回调

视图模板：

<input ... #element (ngModelChange)="delayAction(element, doSomething, [$event])">



组件类别：

    actionsByElements = new Map<HTMLElement, Subscription>();

    delayAction(element: HTMLElement, cb: Function, args: any[]) {
      // cancel countdown by element
      let action = this.actionsByElements.get(element);
      if(action) {
        action.unsubscribe();
      }

      // start new countdown by element
      action = timer(1000).subscribe(() => cb.apply(this, args));
      this.actionsByElements.set(element, action);
    }

    doSomething(){...}

actionsByElements=newmap（）；
delayAction（元素：HtmleElement，cb:函数，参数：any[]）{
//按元素取消倒计时
让action=this.actionsByElements.get（元素）；
如果（行动）{
操作。取消订阅（）；
}
//按元素开始新的倒计时
action=timer（1000）.subscribe（（）=>cb.apply（this，args））；
this.actionsByElements.set（元素，动作）；
}
doSomething（）{…}
Fredrik Lundin为第6节更新的答案：

模板：

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component{(
  ...
)}
export class YourComponent {

  term$ = new Subject<string>();

  constructor() {
    this.term$
      .debounceTime(1000)
      .distinctUntilChanged()
      .switchMap(term => /*do something*/);
  }
}

<input type="text" [value]="item.task_name" (keyup)="term$.next($event.target.value)">

import ......

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

@Component{(
  ...
)}
export class YourComponent implements OnDestroy {

  term$ = new Subject<string>();

  private searchSubscription: Subscription;

  constructor() {
    this.searchSubscription = this.term$.pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      switchMap(term => {
        /*do something*/
        return EMPTY;
      })
    ).subscribe();
  }

  ngOnDestroy() {
    //remember to unsubscribe on destroy

    if (this.searchSubscription) {
      this.searchSubscription.unsubscribe();
      this.searchSubscription = null;
    }
  }
}



组件：

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component{(
  ...
)}
export class YourComponent {

  term$ = new Subject<string>();

  constructor() {
    this.term$
      .debounceTime(1000)
      .distinctUntilChanged()
      .switchMap(term => /*do something*/);
  }
}

<input type="text" [value]="item.task_name" (keyup)="term$.next($event.target.value)">

import ......

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

@Component{(
  ...
)}
export class YourComponent implements OnDestroy {

  term$ = new Subject<string>();

  private searchSubscription: Subscription;

  constructor() {
    this.searchSubscription = this.term$.pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      switchMap(term => {
        /*do something*/
        return EMPTY;
      })
    ).subscribe();
  }

  ngOnDestroy() {
    //remember to unsubscribe on destroy

    if (this.searchSubscription) {
      this.searchSubscription.unsubscribe();
      this.searchSubscription = null;
    }
  }
}

导入。。。。。。
从'rxjs'导入{Subject，EMPTY}；
从'rxjs/operators'导入{debounceTime，distinctUntilChanged，switchMap}；
@组成部分{(
...
)}
导出类YourComponent实现OnDestroy{
术语$=新主题（）；
私人搜索订阅：订阅；
构造函数（）{
this.searchSubscription=此.term$.pipe(
去BounceTime（1000），
distinctUntilChanged（），
开关映射（术语=>{
/*做点什么*/
返回空；
})
).subscribe（）；
}
恩贡德斯特罗（）{
//记得取消订阅
如果（此.searchSubscription）{
this.searchSubscription.unsubscripte（）；
this.searchSubscription=null；
}
}
}
很多解决方案都使用了
setTimeout（）
，但这会导致每次模型更改时都调用该函数，防止这种情况的一种简单方法是先清除超时

e、 g

在最后一次更新完成且
超时持续时间
已过后，此函数仅调用一次
将延迟添加到您的服务中，而不是在1秒内键入“xyz”。它是否会延迟1秒呼叫三次？是的，应该可以。您可以尝试我们的答案之间的任何差异。在发布之前从未注意到您的答案。处于编辑模式。无论如何，我可以发现差异是计时器：），（4000ms，3000ms）。应该是1000，您可以更正。：）对不起，我是一个初学者，你能不能也更新导入部分，因为显示“找不到名称主题”错误，甚至我添加了——从“rxjs/Observable”导入{Observable}；also@JomyJoseph在我的答案中添加了导入：）我只是使用了
subscribe
而不是
switchMap
，它起了作用。不确定我是如何使用它的，但是我发现switchMap函数（Angular5）需要返回。因此，返回Observable.empty（）-或其他任何例子。这是我正在使用的一个很好的示例，但管道在函数前面没有“.”，它们需要用逗号分隔。这应该是公认的答案。工作起来很有魅力。@vangras你能解释一下你的解决方案与Fredrik的相比有什么不同或更好的地方吗？