使用combineLatest时Observable未触发问题排查

1. 订阅了未初始化的旧FormGroup实例 #

sortByFormListenSubscription$作为类属性会在组件实例化时创建，此时它订阅的是初始声明的空myForm（this.fBuilder.group({})）。但在ngOnInit里你重新赋值了myForm为新的FormGroup实例，导致原来的valueChanges订阅完全与新表单无关，自然不会触发。

修复方案：
将sortByFormListenSubscription$的创建移到ngOnInit中，确保订阅的是初始化后的新表单：

sortByFormListenSubscription$!: Observable<any>;

ngOnInit(): void {
  this.myForm = this.fBuilder.group({
    sortBy: [this.sortOptions[0]]
  });

  this.sortByFormListenSubscription$ = this.myForm.valueChanges.pipe(
    tap((res) => {
      console.log(res);
    }),
    map((x) => {
      const myData = {
        "sort_by": x.sortBy.by,
        "sort_order": x.sortBy.order
      }
      return myData;
    }),
    startWith({ "sort_by": "program-name", "sort_order": "asc" })
  );
}

2. 模板中未正确绑定表单控件 #

如果下拉框未与myForm的sortBy控件正确绑定，表单值不会更新，valueChanges也不会触发。需确保模板使用正确的绑定方式：

• 用FormGroup配合formControlName，且用[ngValue]绑定完整对象（因为控件存储的是sortOptions中的对象）：

<form [formGroup]="myForm">
  <select formControlName="sortBy">
    <option *ngFor="let option of sortOptions" [ngValue]="option">
      {{ option.name }}
    </option>
  </select>
</form>

若误用[value]会将对象转为字符串，导致表单值变化异常。

3. 表单控件值未发生实际变化 #

Angular的valueChanges默认采用浅比较，若下拉框选择的选项与当前控件值是同一个对象引用（重复选择同一选项），不会触发事件。但如果是切换不同选项仍无响应，大概率是前两个原因导致。

内容的提问来源于stack exchange，提问作者Andrew Howard