Question

我对RxJS相对较新，因此我试图更好地了解Observable在使用运算符链接在一起时的工作方式。我可以通过使用Subscribe链接它们来使它们正常工作，但这是一个坏习惯。

下面的代码在Angular应用程序中使用，该应用程序涉及向用户显示一个表单，使他们可以查看和保存该应用程序的设置。该表单首先向API发出GET请求，以接收以JSON格式表示的已保存设置。一旦返回，设置将显示给用户。然后，用户可以修改设置并在满意时保存它们。

问题在于，由于某种原因，最终可观察到的setSettings函数中的那个似乎无法正常工作。从我的控制台日志中，我可以看到buildSettingsForm内部的observable正在调用该函数，但是tap运算符内部的命令似乎什么也没做。

从未执行过对console.log(val)的调用，但是我知道肯定正在调用对this.getSettingsFromSerial$的调用，因为我可以看到它的日志。因此，似乎在执行点击调用时，发生了某种事情，实际上没有执行任何内部命令。这是有道理的，因为也没有调用for循环内对this.addRange的调用，这意味着我的表单为空。

initSettings(){
    if(this.savedSettingsState !== undefined)
    {
        if(this.unsavedSettingsExist())
        {
          console.log("Unsaved settings exist");
          this.openUnsavedSettingsModal();
          return;
        }
    }

    this.getOrganisations$().pipe(
        exhaustMap((res: AdminOrganisation[]) => {
          this.organisations = res;
          this.currentOrganisationSerial = this.organisations[0].serialRef;
          this.currentOrganisationName = this.organisations[0].serialName;
          return this.buildSettingsForm(this.currentOrganisationSerial);
        })
    ).subscribe();
}

buildSettingsForm(serial: string) {
    this.ipRangeFormGroup = this.formBuilder.group(
        {
          ipRanges: this.formBuilder.array([])
        }
    );

    this.numArrayElements = this.ipRangeFormArray.length;

    return merge(
        this.ipRangeFormArray.valueChanges.pipe(
            tap(_ => {
              this.numArrayElements = this.ipRangeFormArray.length;
              console.log("numArrayElements: " + this.numArrayElements)
            })
        ),
        this.setSettings(serial)
    );
}

setSettings(serial: string) {
    console.log("setSettings");
    return this.getSettingsFromSerial$(serial).pipe(
        tap(val => {
          console.log("val");
          console.log(val);
          this.savedSettingsState = val;
          this.ipRestrictionEnabled = val.ipRestrictionSettings.ipRestrictionEnabled;
          for (const i of val.ipRestrictionSettings.ipRanges) {
            this.addRange(i.startRange, i.endRange, i.label);
          }
          this.displayForm = true;
        })
    );
  }

Answer 1

我进行了一次闪电战，表明此处的代码中没有任何问题：

https://stackblitz.com/edit/angular-v9x1js?file=src/app/app.component.ts

问题出在管道中的其他地方，导致未处理或吞咽的异常，可能是getSettingsFromSerial$正在执行的操作。在您的订阅中添加错误处理程序并将其记录下来，可能有助于弄清发生了什么。当有人使用拦截器吞没了他们忘记的所有http错误时，我也看到过类似的神秘问题。

使用抽头运算符调用时，可观察到的孩子没有任何作用

1 个答案: