如何在 GET 请求中将两个主题/操作流作为 HTTP 参数传递以使用 RxJS 在 Angular 中返回单个对象/对象数组？

如何解决如何在 GET 请求中将两个主题/操作流作为 HTTP 参数传递以使用 RxJS 在 Angular 中返回单个对象/对象数组？

目标：我想通过使用 RxJS 将用户输入作为 HTTP 参数传递，从我的后端服务获取单个对象和/或一系列对象。 例如，我使用声明式 RxJS，所以我有两个主题（动作流）来在用户点击提交时从用户那里获取输入。我想将这些 Subjects 值（作为 HTTP 参数）传递到我的 http 请求中，以便获取指定的 bay 对象或一系列 bay。 第一个主题/用户输入将始终是强制性的，而第二个主题/用户输入将是可选的。因此，如果有人为第一个输入输入 4，然后为第二个输入输入任何内容。后端将接受两个输入为 4 和 'null'，因为没有输入任何内容。如果是这种情况，则返回 bay Number 为 4 的 bay。如果有第二个输入，如 6，则返回 4 的范围-> 6，如果它们存在。

问题：如何使用声明性 RxJS 将这两个主题作为 http 参数传递？

以下是我的两个主题及其方法，以及我对 bay-service.ts 文件中的 HTTP 请求的尝试。

  private bayStartSelectedSubject = new Subject<number>();
  baySelectedAction$ = this.bayStartSelectedSubject.asObservable();

  private bayEndSelectedSubject = new Subject<number>();
  bayEndSelectedAction$ = this.bayEndSelectedSubject.asObservable();

  selectedBayChanged(selectedBayStartNumber: number,selectedBayEndNumber?: number): void {
    this.bayStartSelectedSubject.next(selectedBayStartNumber);
    this.bayEndSelectedSubject.next(selectedBayEndNumber);
  }

  private HandlingUnitResponseUrlSecondary = 'http://localhost:8080/sbtemplate/readBayInventory';


bayOrBays$ = combineLatest([
    this.baySelectedAction$,this.bayEndSelectedAction$
  ])
    .pipe(
      map(([bayStart,bayEnd]) => {
        mergeMap(() => this.http.get<HuResponse>(`${this.HandlingUnitResponseUrlSecondary}/COS/${bayStart}/${bayEnd}`))
      })
    );

这里是我在 bay-page.ts 文件中获取用户输入的地方，并调用他们的方法来发出用户输入值：

onSubmit() {
    this.bayService.selectedBayChanged(this.bayForm.get('bayStart').value,this.bayForm.get('bayEnd').value);
    if(!this.invalidBay) {
      this.bayDoesNotExistError = true;
      this.selectedBay = this.bayForm.get('bayStart').value;
      this.vibration.vibrate(500);
      console.log('Vibrating for 3 second...')
    } else {
      this.navCtrl.navigateForward([`/results/`]);
    }

我知道代码看起来不太好，但我找不到任何相关信息。感谢您的帮助！

另外这是我尝试使用的后端 API：

@RequestMapping(value="/readBayInventory/{centerId}/{beginBayId}/{endBayId}",method = GET)
    public ResponseEntity<HUResponse> readBayInventory(@PathVariable String centerId,@PathVariable int beginBayId,@PathVariable(required = false) int endBayId) {

解决方法

您可以尝试更改声明 bayOrBays 的方式并转到此表单

const bayOrBays$ = combineLatest([
  baySelectedAction$,bayEndSelectedAction$
]).pipe(
  concatMap(([bayStart,bayEnd]) => this.http.get<HuResponse>(`${this.HandlingUnitResponseUrlSecondary}/COS/${bayStart}/${bayEnd}`))
);

这段代码基本上意味着每次 2 个 Subjects 中的一个发出新值时，您将触发 http 调用并返回其结果。 concatMap 是所谓的“高级运算符”之一，即是一个运算符，它接受一个函数，该函数返回一个 Observable 并返回由该 Observable 发出的值（换句话说，它“扁平化”了由返回的内部 Observable作为输入传入的函数）。

其他“高级运算符”是 mergeMap（又名 flatMap）、switchMap 和 exahustMap。所有的行为都略有不同，但对于 http 调用，通常 concatMap 是安全的默认值。您可能会从 this article 中获得一些关于如何在常见的 http 相关用例中使用 rxJs 的灵感。

最后，目前您得到 Observable<void> 作为 bayOrBays$ 类型的部分原因与您传递给 mergeMap 的函数不返回任何内容有关。请记住，如果您使用花括号定义函数体，则必须显式使用 return 语句来返回某些内容。相反，如果您对正文使用一行格式（即没有花括号），该函数将返回该一行的执行结果。

因此，这种格式（您使用的格式）不会返回任何内容

const myFunction = () => {
  doStuff();
}

虽然这两种格式都返回 doStuff() 返回的任何内容

const myFunction = () => {
  return doStuff();
}

const myFunction = () => doStuff()