在 Angular 中使用 RXJS 来处理异步事件是非常常见的。然而，在 RXJS 6 中，有一个常见的错误是在 Observable.subscribe 中使用运算符时出现了错误信息“运算符不是 Observable 的成员”。 这可能会让人感到困惑，但其实很容易解决。
错误的原因
在 RXJS 6 中，运算符已经从 Observable 中分离出来成为了独立的操作符。这意味着我们不能在 Observable 的原型中找到任何运算符，因此，在 Observable.subscribe 中使用运算符会导致运行时错误。
举个例子，在 Angular 中，我们可能会使用 map 运算符将从后端获取的数据转换为我们需要的格式：
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
------ ----- --------- -
---------- --------------- -
------ ---------------------------------------------------
------------ -- --------------
--
-
-然而，当我们订阅该 Observable 时，在 RXJS 6 中我们必须使用 pipe 方法来组合运算符：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- -------------------
--------- ---------------------
--
------ ----- ----------- -
----- ----
------------------- -------- ---------- --
---------- -
---------------------------------
---- -- --------- - ----
--
-
-在此示例中，调用 map 运算符会导致运行时错误。
解决方法
要解决这个问题，我们需要使用 pipe 方法来组合运算符。 这意味着我们需要使用如下格式来重新编写代码：
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
------ ----- --------- -
---------- --------------- -
------ ---------------------------------------------------
------------ -- --------------
--
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- -------------------
--------- ---------------------
--
------ ----- ----------- -
----- ----
------------------- -------- ---------- --
---------- -
----------------------------
-------- -- --------- - -----
--------------
-
-请注意，我们现在在 pipe 方法中使用 map 运算符，而不再是在 Observable.subscribe 中使用它。在 map 运算符中，我们将返回值赋值给组件的属性 data。
结论
在 RXJS 6 中，我们不能在 Observable.subscribe 中使用运算符。但是我们可以使用 pipe 方法将多个运算符组合在一起，并处理从 Observable 返回的数据。本文展示了如何重构代码以使用 pipe 方法进行任务。这使得我们可以轻松地使用 RXJS 中强大的运算符来处理异步数据流。
示例代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721e4552e7021665e093c65