使用 ngModelChange 去抖动角度 2答案

【问题标题】：debounce angular 2 with ngModelChange使用 ngModelChange 去抖动角度 2
【发布时间】：2017-12-17 20:08:08
【问题描述】：

我在textArea 上有一个ngModelChange，如下所示：

      <ion-textarea placeholder="Type your message here" formControlName="message" [(ngModel)]="message" (ngModelChange)="changing($event)"></ion-textarea>

现在我想知道用户在哪里输入textarea他输入的每个字母，我想每 5 秒触发一次这个事件，我该如何实现呢？

【问题讨论】：

标签： angular typescript ionic2

【解决方案1】：

在您的组件中创建一个Subject。在您的 changing 方法中调用 next 关于该主题。接下来通过 debounce 订阅您的主题：

export class MyComponent {
  mySubject = new Subject();

  contructor(){
    this.mySubject
      .debounceTime(5000)
      .subscribe(val => {
        //do what you want
      });
  }

  changing(event){
    this.mySubject.next(event.valueFromInput);
  }
}

【讨论】：

接下来我该如何打电话？在哪里？
你的答案和@Rahul 的答案有什么区别？
什么是valueFromInput？
事件对象中的某处是来自输入的值
“主题”类型上不存在属性“去抖动”崩溃

【解决方案2】：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" (keyup)='keyUp.next($event)'>
    </div>
  `,
})
export class App {
  name:string;

  public keyUp = new Subject<string>();

  constructor() {
    const observable = this.keyUp
      .map(value => event.target.value)
      .debounceTime(1000)
      .distinctUntilChanged()
      .flatMap((search) => {
        return Observable.of(search).delay(500);
      })
      .subscribe((data) => {
        console.log(data);
      });
  }
}

【讨论】：

ngOnChange 和 keyUp 有什么区别，哪个更好？
但是如何为输入在 *ngFor 内部的字符串数组实现这些？
@anaval 你能详细说明你的问题吗
假设我有一个包含一系列输入的表单，所有输入都是电子邮件，因为用户可以拥有一系列电子邮件并且我想对它们都使用去抖动时间