'Observable' 유형에 'filter' 속성이 없습니다.

'Observable' 유형에 'filter' 속성이 없습니다.

안녕하세요 저는 라우터 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인스턴스OF일 수 있습니다.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 팀에 의해 설계되었습니다.

1. rxjs/operators: 파이프링 가능한 연산자가 모두 들어 있습니다.

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

2. rxjs: 작성 방법, 유형, 스케줄러 및 유틸리티를 포함합니다.

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

이 시나리오에는 몇 가지 수정 사항이 있습니다.

1) 파이프형 연산자 사용

pipeable 연산자는 rxjs/add/operator/*에서 볼 수 있는 "patch" 연산자보다 필요한 연산자만 끌어오기 위한 더 나은 접근 방식입니다.

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 'rxjs/add/operator/filter'. 수정합니다.Observable.prototype덧붙이기filter메서드를 Observable 클래스의 모든 인스턴스에 적용합니다.

다음 두 가지 결과가 있습니다.

• 응용 프로그램별로 한 번만 가져오기 문을 실행하기에 충분합니다.
• 공유 라이브러리/npm 패키지에서는 라이브러리 소비자에게 약간의 혼란을 가져올 수 있습니다(filter()method는 마법처럼 아래에 나타날 것입니다.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));

---

더 자세한 정보: 파이프 가능 연산자

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는 독립 실행형 라이브러리이며, 이 경우의 연산은 독립 실행형 메서드이기도 합니다. 맵, 필터 등은 개체를 통해 액세스할 수 없는 연산자 메서드입니다.당신은 그것들을 따로 가져온다는 것을 기억하세요.

예를 들어 당신은 할 수 없습니다.import { filter}인터넷을 통해 접속하고 싶습니다.router물건.그것은 절대로 작동하지 않을 것입니다. 왜냐하면 a.routerobject는 API의 어딘가에 있는 각도별 클래스 인스턴스입니다.각도는 다음을 제공합니다.pipe()다음 방법으로 이동하기 전에 프로세스에서 체인으로 연결되어야 하는 방법을 등록할 수 있도록 허용하는 method.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)
}

show filter error 는 주로 이렇게 사용합니다.value:any완벽하게 작동하고 있습니다.

여기서 이벤트 유형 -> .filter((이벤트:이벤트)

언급URL : https://stackoverflow.com/questions/39514564/property-filter-does-not-exist-on-type-observableevent