Rxjs 主体未立即发出数据

Question

我有一个带有 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));
  }
}

模板中的代码

<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() 函数来重新分配数据，并且它正在工作。知道为什么会发生这种情况吗？

Answer 1

您需要切换到BehaviorSubject。

服务在组件之前初始化，因此它在组件订阅之前发出值。由于主题不保存值，因此组件不会获得任何内容。通过交换到行为主题，您可以订阅它并立即获取最新值。

这里接受的答案很好地描述了

Subject

和

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);
    });
}