使用FormControl的valueChanges事件绑定的combineLatest不会触发

Question

我通过2个[formControl]“toppings”:array和“toppings2”:array听取2种形式。

我必须同时拥有这两个表单的2个值。因此，我使用“CombineLatest”将我的两个可观察对象组合起来。

我的代码:

ngOnInit() {
combineLatest(this.toppings.valueChanges, this.toppings2.valueChanges)
    .subscribe(val => console.log(val)) 
}

但现在，在组件初始化时，只有一个表单发送console.log(val)。

如果我点击这个表单，在我收到第二个表单的日志后。你遇到过这个问题吗？

- Newbiiiie

---

只有在您至少点击了两个表单时，才会得到 console.log(val) 吗？请记住，combineLatest 不会为可观察到的初始值发出任何值，直到每个可观察到的对象都发出至少一个值。 - kedenk

是的，在开始时只有一个表单向我发送值更改。如果我点击它，第二个表单也可以在之后向我发送值更改。只是我不能一开始就使用第二个表单... - Newbiiiie

Answer 1

你可能希望为两个 Observables 设置初始值。只有当所有 Observables 至少发出一个值时，combineLatest 才会发出值。使用 startWith 操作符来创建这种行为，像这样：

combineLatest(
  this.toppings.valueChanges.pipe(startWith("")), 
  this.toppings2.valueChanges.pipe(startWith(""))
)

或者，如果您有可用的初始值，就像建议的那样：

combineLatest(
  this.toppings.valueChanges.pipe(startWith(this.toppings.value)), 
  this.toppings2.valueChanges.pipe(startWith(this.toppings2.value))
)

请注意，这将会发出一次带有初始值的通知。为了抑制这种行为，您可以使用`skip(1)`操作符来忽略这个初始通知。

- ggradnig

---

或者 以(this.toppings.value)开头。 - Roberto Zvjerković

好的，甚至更好 - ggradnig

Answer 2

你可能希望为两个 Observables 设置初始值。只有当所有 Observables 至少发出一个值时，combineLatest 才会发出值。使用 startWith 运算符来创建这种行为，就像这样：

combineLatest(
  this.toppings.valueChanges.pipe(startWith("")), 
  this.toppings2.valueChanges.pipe(startWith(""))
)

或者，如果您有可用的初始值，就像建议的那样：

combineLatest(
  this.toppings.valueChanges.pipe(startWith(this.toppings.value)), 
  this.toppings2.valueChanges.pipe(startWith(this.toppings2.value))
)

此外，请注意，这将在初始值时发出一次。为了抑制这种行为，您可以使用skip(1)操作符来忽略这个初始通知。

- Shubham Shingala