Question

我在UI上有两个标签，并且两个标签都需要进行某些验证。

第一个标签-帐户ID（必填）

第二个标签-帐户ID +值列表中的至少1个选项。（都需要）

“提交”按钮默认情况下处于禁用状态，只有在满足验证条件时才会启用。

第一次在第一个选项卡上-正常工作。填写帐户ID时启用，空白时禁用

第一次在第二个选项卡上=可以正常工作。填写帐户ID并选择至少一项时启用；如果不满足任何条件，则禁用。

现在，当您返回第一个标签时-事情开始失败。主要是因为两个流都处于活动状态。如何停止/过滤流并使它们按选择的选项卡工作？

此处复制最少-Minimal Demo for issue ( app.component.ts)

有人可以看一下并指出正确的方向吗？

谢谢

Answer 1

所以，我以不同的方式思考它。我可能最终要做的是，一旦选择了ui上的选项卡，就最终确定将在图片中显示哪个流。因此，在每次更改选项卡时，我都会拥有不同的流，并且可以按需运行。此处提供演示-https://stackblitz.com/edit/angular-rmkfvp

但是，如果通过其他rxjs运算符或其他代码看起来还可以，那么还有更好的方法吗？

 overallValidator$ = this.selectedDomain$.pipe(
    tap(() => console.info('--- Inside tap')),
    switchMap((item) => {
      if (item === this.AML) {
        return this.amlDomainValidator$;
      }
      return this.otherDomainValidator$;
  })
);

Answer 2

您可以使用iif

// RxJS v6+
import { iif, of, interval } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const r$ = of('R');
const x$ = of('X');

interval(1000)
  .pipe(mergeMap(v => iif(() => v % 4 === 0, r$, x$)))
  .subscribe(console.log);

// output: R, X, X, X, R, X, X, X, etc...

RxJS流中的条件语句冲突

2 个答案: