angular - FormControl の valueChanges イベントバインディングで combineLatest が発火しない

私は2つのフォーム、2つの [formControl] 「toppings」: 配列と「toppings2」: 配列を通して聞きます。

私はフォームの2つの値を同時に持たなければなりません。だから、私は2つのオブザーバブルを「CombineLatest」で結合します。

私のコード：

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

しかし今、コンポーネントの初期化時には、1つのフォームだけが console.log(val) を送信します。

もし私がこのフォームをクリックしたら、次に2つ目のフォームのログを受け取ることになります。あなたはこの問題に遭遇したことがありますか？

回答 #1

おそらく両方のオブザーバブルに初期値を設定したいでしょう。combineLatest は、すべてのオブザーバブルが少なくとも1つの値を発行した場合にのみ発行します。この動作を作成するには、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)演算子を使用してこの初期通知を無視できます。