Angular 如何观察rxjs中的属性变化？

我有一个带有简单输入标签的angular6应用程序：

<input type="text" name="searchBox" [(ngModel)]="searchTerm" class="form-control" />

我想观察一下

searchTerm

属性，添加一些操作符，如

debounce

等

---

我如何才能做到这一点（不使用

反应表单

）？

有几种方法可以实现这一点。我发现最简单的方法如下：

模板应包含：

<input
  #searchInput
  [(ngModel)]="searchTerm"
  type="text"
  (keyup)="onChange(searchInput.value)" />

组件应具有：

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

  @Output() inputChanged: EventEmitter<string> = new EventEmitter<string>();
  input = new Subject<string>();

  constructor() {
    this.input
        .pipe(debounceTime(300))
        .pipe(distinctUntilChanged())
        .subscribe(input => this.emitInputChanged(input));
  }

  onChange(input: string) {
     this.input.next(input);
  }

从'rxjs'导入{Subject}；
从'rxjs/operators'导入{debounceTime，distinctUntilChanged}；
@Output（）inputChanged:EventEmitter=新的EventEmitter（）；
输入=新主题（）；
构造函数（）{
这是输入
.管道（去BounceTime（300））
.pipe（distinctUntilChanged（））
.subscribe（输入=>this.emitInputChanged（输入））；
}
onChange（输入：字符串）{
this.input.next（输入）；
}

---

主题可下标。您可以通过管道输入其他函数（如
去盎司
），然后在链的末尾从中发出更改。我不知道你在用
ngModel
做什么，但既然你的问题中有它，我就把它忘了。任何正在侦听
inputChanged
输出的组件都将在反抖动发生后获得更新的值。
主题与视图输入之间的连接可能重复？抱歉，我键入得太快了。我漏掉了几行。我已经更新了答案。希望这有帮助。太好了！很有魅力