使用ngModelChange

时间:2017-07-13 07:19:18

标签: angular typescript ionic2

ngModelChange上有textArea,如下所示:

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

现在我想知道用户在这个textarea上输入的位置,所以我想用一个5000的定时器进行去抖动来知道他是否&# 39; s是否打字,不是为他打字的每一封信发送,我想每5秒发一次这个事件,我怎么能实现呢?

2 个答案:

答案 0 :(得分:8)

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

答案 1 :(得分:3)

在您的组件中创建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);
  }
}