Rxjs主题不立即发出数据答案

【问题标题】：Rxjs Subject not emitting data immediatelyRxjs主题不立即发出数据
【发布时间】：2020-09-29 14:54:47
【问题描述】：

我有一个带有 RXJS 主题的服务，我正在将数据分配给构造函数内部的主题，执行 api 调用。这个主题我在一个组件模板中订阅。虽然数据是提供给对象的，但它并不是第一次立即发出。

interface Employee {
employee_age: number;
employee_name: string;
employee_salary: number;
id: string;
profile_image: string;
}

@Injectable({
  providedIn: "root",
})
export class EmployeeService {
 employeesSub = new Subject<Employee[]>();

 employees: Employee[];

 constructor(private http: HttpClient) {

this.api().subscribe((res) => {
  this.employees = res.data;
  this.employeesSub.next(this.employees);
});

}

 getEmployees(){
     this.employeesSub.next(this.employees);
 }

 addEmployee(name,age,salary) {
    this.employees.unshift({id:(this.employees.length + 
 1).toString(),employee_age:age,employee_name:name,employee_salary:salary,profile_image:""});
   this.employeesSub.next(this.employees);
 }
 
 api() {
    return this.http
     .get<any>(environment.employeeUrl)
     .pipe(map((data) => data.items));
   }
  }

 Code in template

  <h2>List</h2>
  <div style="display: flex;"></div>
  <table>
     <tr *ngFor="let item of employeeService.employeesSub|async">
       <td>      {{ item.employee_name}}    </td>
       <td>      {{ item.employee_age}}    </td>
       <td>      {{ item.employee_salary}}    </td>
     </tr>
  </table>

我通过在 200 毫秒后调用 getEmployees() 函数重新分配数据并且它正在工作。知道为什么会这样。

【问题讨论】：

刚刚发现在组件模板中使用异步订阅时，使用可观察对象而不是主题并向其分配数据是有效的。

标签： angular rxjs rxjs6 rxjs-observables

【解决方案1】：

您需要切换到BehaviorSubject。

服务在组件之前被初始化，所以它在组件订阅之前发出值。由于 Subject 不包含值，因此组件不会得到任何东西。通过切换到一个 Behavior 主题，您可以订阅它并立即获取最新值。

这里接受的答案describes the difference been a Subject and a BehaviorSubject很好。

// Init the subject with a starting value, to be updated in the constructor later
employeesSub = new BehaviorSubject<Employee[]>([]);

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

【讨论】：