RxJS Subject首次无法立即发射数据问题排查求助

这个问题我太熟了！核心问题出在你使用的Subject的特性上：

为什么首次订阅拿不到数据？ #

Subject的本质是只推送「订阅之后产生」的值，它不会留存任何历史推送记录。

你的代码执行时序大概是这样的：

1. Angular启动时，EmployeeService作为根服务被实例化，构造函数里立刻发起API请求。
2. 假设API请求完成得很快（本地调试时网络延迟极低），这时候employeesSub.next(this.employees)已经执行了，但你的组件此时还没完成初始化，模板里的async管道还没建立对employeesSub的订阅。
3. 等组件模板完成订阅时，Subject早就把API返回的那个值发完了，不会给新订阅者补发历史值，所以你看不到数据。

而延迟200ms调用getEmployees()时，组件的订阅已经完全建立好了，这时候employeesSub.next(this.employees)发送的值就能被async管道接收到，自然能正常显示数据。

怎么解决？ #

把Subject换成**BehaviorSubject或者ReplaySubject**就可以了，这两种Observable会留存历史值，给新订阅者补发：

方案1：用BehaviorSubject（推荐） #

BehaviorSubject会始终保存最新的一个值，新订阅者一订阅就会收到这个最新值。初始化时需要传一个默认值（比如空数组）：

修改服务里的代码：

// 替换原来的Subject定义
employeesSub = new BehaviorSubject<Employee[]>([]); 

constructor(private http: HttpClient) { 
  this.api().subscribe((res) => { 
    this.employees = res.data; 
    this.employeesSub.next(this.employees); 
  }); 
}

这样组件模板的async管道订阅时，不管API请求有没有完成，都会先收到默认的空数组，等API返回后再收到最新的员工数组，完美解决首次加载的问题。

方案2：用ReplaySubject #

如果需要留存多个历史值（比如你想让新订阅者收到最近的N次推送），可以用ReplaySubject：

// 保存最近1次的推送值
employeesSub = new ReplaySubject<Employee[]>(1); 

它的效果和BehaviorSubject类似，但不需要初始化默认值，不过首次订阅时如果还没有任何值被推送，就不会收到数据，所以还是BehaviorSubject更适合这种列表加载的场景。

额外优化建议 #

你可以去掉服务里的employees变量，直接通过employeesSub.value（BehaviorSubject专属方法）来获取当前的员工数组，避免冗余变量：

addEmployee(name,age,salary) { 
  const currentEmployees = this.employeesSub.value;
  const newEmployee = {
    id:(currentEmployees.length + 1).toString(), 
    employee_age: age, 
    employee_name: name, 
    employee_salary: salary, 
    profile_image: "" 
  };
  this.employeesSub.next([newEmployee, ...currentEmployees]); 
}

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