Javascript “Observable<Event>”类型上不存在属性“过滤器”

Property 'filter' does not exist on type 'Observable<Event>'

提问by ritz078

Hi I am using Angular 2 final with router 3.0. I want to filter the events that are emitted from this.router.events

嗨，我正在使用带有路由器 3.0 的 Angular 2 final。我想过滤从中发出的事件this.router.events

What I want to do :

我想做的事 ：

import 'rxjs/operator/filter';

//...

this.router.events
  .filter((event:Event) => event instanceof NavigationEnd)
  .subscribe(x => console.log(x))

eventcan be instanceOf NavigationEnd, NavigationStartor RoutesRecognizedbut I want only NavigationEnd. But I get an error that

event可以是 instanceOf NavigationEnd，NavigationStart或者RoutesRecognized我只想要NavigationEnd. 但我得到一个错误

Property 'filter' does not exist on type Observable<Event>

Property 'filter' does not exist on type Observable<Event>

during compile time.

在编译期间。

When i import the whole rxjslibrary the error disappears. What should I import to make it work without loading the full rxjs library ?

当我导入整个rxjs库时，错误消失了。我应该导入什么才能使其工作而不加载完整的 rxjs 库？

回答by candidJ

UPDATE

更新

For RXJS 5.xversion:

对于RXJS 5.x版本：

import 'rxjs/add/operator/filter';

import 'rxjs/add/operator/filter';

For RXJS 6.xversion:

对于RXJS 6.x版本：

import { filter } from 'rxjs/operators';

import { filter } from 'rxjs/operators';

The following ruleshave been designed by the RxJS team to help JavaScript developers refactor import paths:

1. rxjs/operators: Contains all pipeable operators.

import { map, filter, scan } from 'rxjs/operators';

2. rxjs: Contains creation methods, types, schedulers, and utilities.

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

在下面的规则已经被设计为通过RxJS团队来帮助JavaScript开发人员重构进口路径：

1. rxjs/operators: 包含所有可管道操作符。

import { map, filter, scan } from 'rxjs/operators';

2. rxjs：包含创建方法、类型、调度程序和实用程序。

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

回答by Petr Havlicek

There are several possible fixes for this scenario.

对于这种情况，有几种可能的修复方法。

1) Use pipeable operators

1) 使用可管道操作符

Pipeable operators are meant to be a better approach for pulling in just the operators you need than the "patch" operators found in rxjs/add/operator/*

与 rxjs/add/operator/* 中的“补丁”操作符相比，可管道操作符是一种更好的方法，可以只引入您需要的操作符

import { filter } from 'rxjs/operators';

// ..

 this.router.events.pipe(
   filter((event:Event) => event instanceof NavigationEnd)
 ).subscribe(x => console.log(x))

---

---

2) Use 'rxjs/add/operator/filter'

2）使用'rxjs/add/operator/filter'

Change the import statement to import 'rxjs/add/operator/filter'. This will modify Observable.prototypeand add filtermethod to an every instance of the Observable class.

将导入语句更改为import 'rxjs/add/operator/filter'. 这将修改Observable.prototype和添加filter方法到 Observable 类的每个实例。

There are two consequences:

有两种后果：

• it is enough to execute the import statement just once per the application
• in a shared library/npm package this might bring some confusion to a library consumer (filter()method will magically appear under Observablewhile using the library)

• 每个应用程序只执行一次导入语句就足够了
• 在共享库/npm 包中，这可能会给库使用者带来一些困惑（使用库时filter()方法会神奇地出现在下面Observable）

---

---

3) Leave the operator import but change how it is called

3) 保留操作符导入但更改其调用方式

The statement import 'rxjs/operator/filter'is perfectly valid. It will import just the operator. This approach will not mess with the Observable.prototype. On downside it will make it more difficult to chain several operators.

该声明import 'rxjs/operator/filter'完全有效。它将只导入操作符。这种方法不会弄乱Observable.prototype. 不利的一面是，它会使链接多个运营商变得更加困难。

import 'rxjs/operator/filter'; // This is valid import statement.
                               // It will import the operator without 
                               // modifying Observable prototype
// ..

// Change how the operator is called
filter.call(
   this.router.events, 
   (event:Event) => event instanceof NavigationEnd
).subscribe(x => console.log(x));

---

---

More details: Pipeable Operators

更多细节：可管道操作符

回答by Ian Samz

Angular Update(5.x to 6.x) also comes with update of rxjs from 5.x to 6.x So simply add

Angular Update(5.x to 6.x) 还附带了 rxjs 从 5.x 到 6.x 的更新 所以只需添加

import { filter } from 'rxjs/operators';

then

然后

this.router.events.pipe(
  filter((event:Event) => event instanceof NavigationEnd)
).subscribe(x => console.log(x))

Hope That helps someone

希望对某人有帮助

回答by Nathaniel H

After updating to Rxjs 6 with Angular 6 upgrade.

使用 Angular 6 升级更新到 Rxjs 6 后。

import { map, filter, scan } from 'rxjs/operators';

...
this.registrationForm.valueChanges
      .pipe(
        filter(() => this.registrationForm.valid),
        map((registrationForm: any) => {
          this.registrationVm.username = registrationForm.username;
          this.registrationVm.password = registrationForm.password;
          this.registrationVm.passwordConfirm = registrationForm.passwordConfirm;
        })
      )
      .subscribe();

回答by wendellmva

The easiest way to work around that is to just

解决这个问题的最简单方法就是

npm install rxjs-compat 

which will make any version differences magically go away!

这将使任何版本差异神奇地消失！

回答by Mosia Thabo

PLEASE NOTE:

请注意：

I would like to mention a few things that the above answers are not addressing.

我想提一些上面的答案没有解决的问题。

RxJs is a standalone library, and for that matter its operations are standalone methods as well. map, filter etc are operator methods that are not accessed through an object. Remember that you import them seperately.

RxJs 是一个独立的库，因此它的操作也是独立的方法。map、filter 等是不能通过对象访问的操作符方法。请记住，您是单独导入它们的。

So for example you cannot import { filter}and want to access it through the routerobject. That will never work because a routerobject is an angular specific class instance somewhere in the API's. Angular provides a pipe()method that allows you to register methods that must be chained in the process before moving to the next method within the routerthat aren't part of the routerobject.

因此，例如您不能import { filter}并且想要通过router对象访问它。这永远不会起作用，因为router对象是 API 中某个特定角度的类实例。Angular 提供了一种pipe()方法，允许您注册必须在流程中链接的方法，然后才能移动到router不属于router对象的下一个方法。

ALWAYS REMEMBER THAT

永远记住

回答by shyvijay

Please check the type of Event here -> .filter((event:Event)

请在此处检查事件类型 -> .filter((event:Event)