如何将RxJ中的两个流和更多的流组合在一起？
我有一种反应式。当我输入和停止3秒-它应该console.log(form.value)。但是，当我单击submit - console.log(form.value)时，应该立即对其进行记录，并防止生成等待3秒的以前的console.log()。在我输入的时候--而不是按submit --它应该在3秒后再次输入console.log()。
我对RxJ很在行。我刚刚弄明白了如何使用debounceTime()操作符来完成第一部分。但是，我无法理解如何将提交事件“注入”到表单的流中，并防止它从console.log()中消失；
component.html
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input type="text" formControlName="name" placeholder="name"><br>
<input type="text" formControlName="age" placeholder="age"><br>
<button>Save</button>
</form>component.ts
export class AppComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
'name': [],
'age': []
});
this.form.valueChanges.pipe(
debounceTime(3000)
).subscribe(value => console.log(value));
}
onSubmit() {
console.log(this.form.value);
}
}预期行为：
当我打字时，停止2秒-什么都不会发生，如果我停止了3秒或更多，然后console.log(form.value)；
当按下submit应立即console.log(form.value)，并取消先前等待的第一个案例。
回答 2
Stack Overflow用户
发布于 2019-01-17 08:38:49
解决方案：https://stackblitz.com/edit/angular-gn1dwx
所以，在溪流中，我们有：
- 呈流
- 一连串被取消的变化事件。
我们希望避免重复事件。因此，我们合并我们的两个流，并添加distinctUntilChanged操作符以避免重复的值。我们序列化/反序列化，因为我们不希望对实例进行不同的操作，而希望对值进行操作。
若要清除此组件被销毁时的订阅，我们使用takeUntil自动关闭可观察到的订阅，它将自动处理订阅(始终清除订阅！)
注意:更改一个值，等待4秒，然后单击submit不会触发订阅。我想这是故意的行为。
Stack Overflow用户
发布于 2019-01-17 05:52:58
当表单提交时，您可以简单地从可观察到的unsubscribe中提取。
export class AppComponent implements OnInit {
form: FormGroup;
subscription;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
'name': [],
'age': []
});
this.subscription = this.form.valueChanges.pipe(
debounceTime(3000)
).subscribe(value => console.log(value));
}
onSubmit() {
this.subscription.unsubscribe();
console.log(this.form.value);
}
}https://stackoverflow.com/questions/54229509
复制相似问题
腾讯云开发者
