如何使用运算符 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 出现错误，因此 ngChanges 有效。

如果为null，如何处理并且不创建流？

此代码无法获取模板中的数据：

  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 条件函数。试试下面的

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 管道

要使用async 管道，您需要从控制器中删除订阅。

选项 1：使用async 管道

控制器

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 管道）

控制器

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 是否存在，然后只创建流。

   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 时它才会继续前进。这种情况下，当 value 为 null 时，它会强制转换为 false 并且不会继续。

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