использование concatMap для упорядочивания нескольких наблюдаемых

Question

Я пытаюсь использовать Rx JS concatMap для упорядочивания двух моих наблюдаемых объектов, чтобы он возвращал идентификатор сотрудника перед вызовом службы, чтобы вернуть объект для привязки к моей таблице матов в Angular 9. Но я не уверен, как правильно написать синтаксис. первая наблюдаемая - это фактически субъект поведения, который я создал, чтобы позволить компонентам подписываться в любом месте приложения. второй - HTTP-ответ от веб-api.

Я смотрел на этот пример и пытался понять его, но просто стучал по клавиатуре. Rx JS concatMap

//first observable (actually a Behavior Subject)
this.userService.currentEmployeeId.subscribe(empId => this.employeeID = empId)

//second observable
this.service.getMissingContractsSummary(this.employeeID)
.subscribe(
  response => {        
    this.dataSource = new MatTableDataSource<Contractsummary>(response);
    this.dataSource.paginator = this.paginator;
  }
);

Answer 1

concatMap должно работать, но в зависимости от желаемого поведения вы можете попробовать switchMap. В любом случае синтаксис аналогичен. Вам нужно будет передать эту операцию наблюдаемому объекту currentEmployeeId. Когда это испускает новое значение, функция switchMap может передать значение в функцию get вашей службы, чтобы вернуть это наблюдаемое. Затем вы можете подписаться, как в вашем примере кода.

this.userService.currentEmployeeId.pipe(
  switchMap(empId => this.service.getMissingContractsSummary(empId))
).subscribe(response => {
    this.dataSource = new MatTableDataSource<Contractsummary>(response);
    this.dataSource.paginator = this.paginator;
})

PS Не забудьте отказаться от подписки, так как похоже, что currentEmployeeId может не завершиться.

Answer 2

Попробуйте следующим образом:

import { concatMap } from 'rxjs/operators';

this.userService.currentEmployeeId.pipe(
   concatMap(empId => this.service.getMissingContractsSummary(empId)),
).subscribe(response => {
  this.dataSource = new MatTableDataSource<Contractsummary>(response);
  this.dataSource.paginator = this.paginator;
});

Есть разница между concatMap, switchMap, mergeMap. В вашем примере, я думаю, я бы переключил concatMap на switchMap, хотя, скорее всего, для вашего примера использование любого из 3 сработает.

https://blog.angular-university.io/rxjs-higher-order-mapping/