Angular中valueChanges订阅初始化不执行，需首次触发执行的解决方法

嘿，这个场景太常见了！你现在的valueChanges订阅只会在skus的值发生变化时触发，要实现订阅时立即执行一次，后续值变化正常响应，只需要借助RxJS的startWith操作符就可以轻松搞定。

修改后的代码示例： #

// 先获取skus的初始值
const initialSkusValue = this.productForm.get('skus').value;

this.skusChangeSubscription = this.productForm.get('skus').valueChanges
  .pipe(
    debounceTime(600),
    startWith(initialSkusValue) // 关键：添加startWith，传入初始值
  )
  .subscribe(skusValue => {
    console.log('SKUS: ', skusValue);
    // ... 你的其他业务逻辑
  });

为什么这么做？ #

• startWith操作符会在Observable开始发送值之前，先把你传入的初始值推送出去，这样订阅一开始就能拿到这个值并执行回调逻辑。
• 后续skus的值发生变化时，valueChanges依然会正常触发，加上你原本的debounceTime(600)防抖逻辑，完全不影响原有功能。

额外小提示 #

如果不想单独提前获取初始值，也可以直接把this.productForm.get('skus').value塞进startWith里，写法更简洁：

this.skusChangeSubscription = this.productForm.get('skus').valueChanges
  .pipe(
    debounceTime(600),
    startWith(this.productForm.get('skus').value)
  )
  .subscribe(skusValue => {
    console.log('SKUS: ', skusValue);
    // ... 你的其他业务逻辑
  });

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