财产'过滤器'在类型'可观察<事件>'

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

本文关键字：lt 事件 gt 观察 过滤器 财产 类型      更新时间：2023-09-26

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

我想做的事：

import 'rxjs/operator/filter';
//...
this.router.events
  .filter((event:Event) => event instanceof NavigationEnd)
  .subscribe(x => console.log(x))

event可以是NavigationEnd、NavigationStart或RoutesRecognized的实例，但我只想要NavigationEnd。但是我得到一个错误

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

在编译时。

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

更新

对于RXJS 5.x版本：

import 'rxjs/add/operator/filter';

对于RXJS 6.x版本：

import { filter } from 'rxjs/operators';

RxJS团队设计了以下规则以帮助JavaScript开发人员重构导入路径：

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

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

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

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

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

1( 使用可管道操作器

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

import { filter } from 'rxjs/operators';
// ..
 this.router.events.pipe(
   filter((event:Event) => event instanceof NavigationEnd)
 ).subscribe(x => console.log(x))

2( 使用"rxjs/add/operator/filter">

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

有两个后果：

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

3( 保留运算符导入，但更改其调用方式

语句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));

更多详细信息：Pipable Operators

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

import { filter } from 'rxjs/operators';

然后

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

希望这能帮助某人

使用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();

解决这一问题的最简单方法是只使用

npm install rxjs-compat

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

请注意：

我想提一下上述答案没有涉及的一些问题。

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

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

永远记住

transform(value: any,  args?: any): unknown {
  if(!args)     
    return value;
  return value.filter(item => item.title)
}
transform(value: any,  args?: any): unknown {
  if(!args)     
    return value;
  return value.filter(item => item.title)
}

如果像这样显示滤波器错误使用，主要是value:any工作得很好。

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

相关文章：