Rxjs監聽精確版本如何使用

這篇“Rxjs監聽精確版本如何使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Rxjs監聽精確版本如何使用”文章吧。

注釋掉一個觸發條件

# 留下的代碼大致如下
private searchCondition$ = new Subject();
this.searchCondition$.next({
...(searchParam || {} ) 
...param,
});

...解構是2次，是不是這里導致的？

可是...解構代碼是同步操作，之后才執行到next。多添加一個...試試，不過還是只有2次調用

 this.searchCondition$.next({
   ...(searchParam || {} ) 
   ...param,
   ...{a:1,}
 });

既然next異步觸發不行，代碼也不復雜，就重寫直接同步調用

this.requestData({
   ...(searchParam || {} ) 
   ...param,
 });

經過測試，還是調用2次，那么問題就不是出現在發的地方

那就是監聽的地方，觸發了2遍

查看界面監聽也就是subscribe()的地方

# 在html自定義組件中存在兩處這樣的代碼
<cus-component [dataset]="dataset$ | async "> </cus-component>
# 這是ts監聽地方
this.dataset$ = this.getDataLine(searchParam).pipe(
   switchMap((res) => {
       ...
       return of(res)
   }),
)

上述代碼，通過注釋掉一處html引用，編譯后發現，調用次數變為1.故出現問題的代碼就算定位到了。那么怎么fix？

修改代碼，不監聽http請求返回，直接把得到的數據返回給界面展示

 const sub = this.getDataLine(searchParam).pipe(
    tap((res) => {
        ...
        this.dataset$ = of(res)
    }),
 )
 //添加subscribe句柄管理，在component destory時候，銷毀釋放
 this.subs?.add(sub);

添加配置，屏蔽掉多次調用結果

//設置利用最后一次的值
 shareReplay(1)

拓展：

Expression Changed After Checked

原因：

只有開發環境才有，用于提示html綁定的變量多次修改了，界面還沒來及更新。

解決辦法：

• 方法一：把code修改的地方，添加上setTimeout，延遲去刷新界面

• 方法二： 針對code，改用Observable， html界面使用上async

You provided an invalid object

TypeError: You provided an invalid object where a stream was expected. 
You can provide an Observable, Promise, Array, or Iterable

可能原因：

最直接的從錯誤字面意思來，就是提供的對象，是一個不可用的對象，需要fix

解決辦法

直接在報錯的時候，debug，跳轉到報錯的位置，查看stack里面的內容，里面會清晰告訴你那里有錯誤。

常見的解決辦法

• 判定返回的對象是否undefined

• 添加? or if等支持， 判定對象的方法調用,譬如 chart.draw() , chart不能為null，undefined.

以上就是關于“Rxjs監聽精確版本如何使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。