La propiedad ‘filtro’ no existe en el tipo ‘Observable’

Nuestros mejores programadores agotaron sus provisiones de café, en su búsqueda diariamente por la solución, hasta que Max encontró el resultado en Beanstalk y hoy la compartimos aquí.

Solución:

ACTUALIZAR

Para RXJS 5.x versión:

import 'rxjs/add/operator/filter';

Para RXJS 6.x versión:

import filter from 'rxjs/operators';

El equipo de RxJS ha diseñado las siguientes reglas para ayudar a los desarrolladores de JavaScript a refactorizar las rutas de importación:

1. rxjs/operators: Contiene todos los operadores canalizables.

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

2. rxjs: contiene métodos de creación, tipos, programadores y utilidades.

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

Hay varias soluciones posibles para este escenario.

1) Usar operadores canalizables

Los operadores canalizables están destinados a ser un mejor enfoque para incorporar solo los operadores que necesita que los operadores de “parche” que se encuentran en 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/agregar/operador/filtro’

Cambie la declaración de importación a import 'rxjs/add/operator/filter'. Esto modificará Observable.prototype y añadir filter método a cada instancia de la clase Observable.

Hay dos consecuencias:

• es suficiente ejecutar la declaración de importación solo una vez por aplicación
• en un paquete de biblioteca compartida/npm, esto podría generar cierta confusión para un consumidor de biblioteca (filter() El método aparecerá mágicamente debajo Observable mientras usa la biblioteca)

---

3) Deje la importación del operador pero cambie la forma en que se llama

La declaración import 'rxjs/operator/filter' es perfectamente valido. Importará solo el operador. Este enfoque no interferirá con el Observable.prototype. Como desventaja, hará que sea más difícil encadenar a varios operadores.

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

---

Más detalles: Operadores canalizables

Actualización angular (5.x a 6.x) también viene con la actualización de rxjs de 5.x a 6.x Así que simplemente agregue

import  filter  from 'rxjs/operators';

luego

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

Espero que eso ayude a alguien

Te mostramos las comentarios y valoraciones de los usuarios

Agradecemos que desees añadir valor a nuestra información cooperando tu experiencia en las notas.

---

---

Utiliza Nuestro Buscador