Angular中如何让multiSelect的onSelect先于valueChanges执行

ds-multi-select组件内部默认执行逻辑是先更新绑定的FormControl值、触发valueChanges事件，再向外发射自定义Select事件，不建议强行修改组件内部事件发射顺序，可按优先级选择以下落地方案：

• 方案1：通过RxJS事件流合并保证状态优先获取（最稳定，无兼容问题）
  不依赖全局变量存选中状态，用Subject承接Select事件抛出的状态，再通过withLatestFrom操作符将选中状态流和表单值变更流合并，保证处理表单值时一定能拿到最新选中状态：

  1. 首先在组件类中声明状态流：

  private readonly selectedItemStatus$ = new Subject<boolean>();
  IsSelected = false;
  

  2. 修正原onSelect方法，将选中状态推入流：

  onSelect(selectedItem: any) {
    this.IsSelected = selectedItem.isSelectedItem;
    // 同步推送最新选中状态
    this.selectedItemStatus$.next(this.IsSelected);
  }
  

  3. 改造valueChanges监听逻辑：

  import { skip, withLatestFrom } from 'rxjs/operators';
  
  // 表单初始化完成后添加监听，skip(1)跳过表单赋值时的首次默认触发
  this.form.get('costCenter').valueChanges.pipe(
    skip(1),
    withLatestFrom(this.selectedItemStatus$)
  ).subscribe(([costCenterValue, currentSelectedStatus]) => {
    // 此处currentSelectedStatus就是最新的选中状态，和onSelect逻辑完全同步
    // 直接写业务逻辑即可
  });
  

• 方案2：微任务延迟对齐执行顺序（改动最小）
  如果不想重构现有逻辑，可通过RxJS调度器将valueChanges的回调推迟到当前同步执行栈清空后再运行，此时onSelect已经执行完成，全局变量IsSelected已经完成赋值：

  import { observeOn } from 'rxjs/operators';
  import { asyncScheduler } from 'rxjs';
  
  this.form.get('costCenter').valueChanges.pipe(
    observeOn(asyncScheduler)
  ).subscribe(costcheck => {
    // 此处可直接获取onSelect中赋值的IsSelected值
    console.log(this.IsSelected);
    // 业务逻辑
  });
  

  注意：不要用delay(0)或setTimeout实现延迟，observeOn(asyncScheduler)走微任务队列，时序稳定性更高，不会产生可见的渲染延迟。

• 方案3：直接从表单值中获取选中状态（最简洁）
  大部分多选组件支持配置返回选中项完整对象，你可以先打断点打印valueChanges返回的costcheck值结构，通常组件会直接在返回值中携带每个选项的选中状态字段，不需要额外监听Select事件。你之前没找到对应字段大概率是没有展开完整返回值结构，可以重点查找选项对象下的选中标识属性。

额外排错提示：你贴出的代码存在多处会导致逻辑失效的拼写/格式问题，请先修正：

• 表单监听的valuechanges应为驼峰写法valueChanges，subsribe拼写错误，正确为subscribe
• Angular模板绑定大小写敏感，模板中绑定的(Select)="onselect($event)"要和TS类中的方法名大小写完全一致
• 所有代码中的引号请替换为英文半角引号，不要使用中文全角引号

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