如何使用运算符 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 则不创建流？

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

  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

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

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

Answer 2

您可以使用 rxjs 运算符提供的过滤器运算符，如下所示。只有当您 return 为真时，它才会继续。在这种情况下，当值为空时，它将转换为假，并且不会继续。

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

Answer 3

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

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

此处仅当定义了 zuPrimaryData 时才会创建可观察对象。如果条件为假，它 returns RxJS EMPTY 常量。

来自 EMPTY 文档：

Creates an Observable that emits no items to the Observer and immediately emits a complete notification.

^{您还可以使条件更明确以便于阅读：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>