gpt4 book ai didi

angular - 如何观察rxjs中的属性变化?

转载 作者:行者123 更新时间:2023-12-02 03:35:22 24 4
gpt4 key购买 nike

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

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

我想创建一个可观察的 searchTerm 属性来添加一些运算符,例如 debounce 等。

我怎样才能做到这一点(不使用ReactiveForms)?

最佳答案

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

模板应包含:

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

主题可订阅。您可以通过管道输入其他函数(例如 debounce),然后可以在链的末尾发出来自它的更改。我不知道您使用 ngModel 做什么,但由于您的问题中有它,所以我留下了它。任何监听 inputChanged 输出的组件都将在去抖发生后获取更新的值。

关于angular - 如何观察rxjs中的属性变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50392383/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com