如何使用操作员 from 处理错误 rxjs？

Question

在 ngOnChanges 中，我将输入数据监听到组件。

ngOnChanges(): void {
    from(this.zuPrimaryData).pipe(
      max((a, b) => a["nu"] - b["n"])
    ).subscribe((data) => {
      console.log(data);
    });
  }

第一次this.zuPrimaryData来自null ir 出现错误，因此 ngChanges 有效。

如果 null，如何处理这个问题并且不创建 stream？

这段代码不会让我在模板中获取数据：

  ngOnChanges(): void {
    this.zu$ = iif(() => this.data, from(this.data)).pipe(
      max((a, b) => a["n"] - b["n"]),
      map((data) => data)
    );
  }

模板是：

{{zu$ | async }}

Answer 1

如果您需要纯 RxJS 解决方案，您可以使用iif条件 function。 尝试以下

ngOnChanges(): void {
  iif(() => this.zuPrimaryData, from(this.zuPrimaryData)).pipe(
    max((a, b) => a["nu"] - b["n"])
  ).subscribe((data) => {
    console.log(data);
  });
}

此处仅当定义了zuPrimaryData时才会创建 observable。 如果条件为假，则返回 RxJS EMPTY常量。

来自EMPTY文档：

创建一个不向观察者发出任何项目并立即发出完整通知的 Observable。

^{您还可以使条件更加明确以提高可读性： iif(() => (this.zuPrimaryData && this.zuPrimaryData,== null). from(this.zuPrimaryData))}

---

更新：使用async pipe

要使用async pipe，您需要从 controller 中删除订阅。

选项 1：使用async pipe

Controller

result$: any;

ngOnChanges(): void {
  this.result$ = iif(() => this.zuPrimaryData, from(this.zuPrimaryData))
    .pipe(max((a, b) => a["nu"] - b["n"]));
}

模板

<div>{{ result$ | async }}</div>

选项 2：使用订阅（没有async管道）

Controller

result: any;

ngOnChanges(): void {
  iif(() => this.zuPrimaryData, from(this.zuPrimaryData))
    .pipe(max((a, b) => a["nu"] - b["n"]))
    .subscribe(data => this.result = data);
}

模板

<div>{{ result }}</div>

Answer 2

首先检查 this.zuPrimaryData 是否存在，然后只创建 stream。

   ngOnChanges(): void {
      if(this.zuPrimaryData) {
        from(this.zuPrimaryData).pipe(
          max((a, b) => a["nu"] - b["n"])
        ).subscribe((data) => {
          console.log(data);
        });
      }
    }

Answer 3

您可以使用 rxjs 运算符提供的过滤器运算符，如下所示。 只有当您返回 true 时，它才会继续前进。这种情况下，当值为 null 时，它将强制转换为 false，并且不会提前 go。

from(this.zuPrimaryData).pipe(
      filter(data=>!!data), 
      max((a, b) => a["nu"] - b["n"])
    ).subscribe((data) => {
      console.log(data);
    });