如何使用操作員 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);
    });