관찰 가능한 모든 'null' 값 필터링

관찰 가능한 모든 'null' 값 필터링

다음과 같은 환자를 위한 서비스가 있습니다.

@Injectable() export class UserService() {
    private currentUserSubject = new BehaviorSubject<User>(null);
    public currentUser = this.currentUserSubject.asObservable().distinctUntilChanged(); 

    ... // emitting new User    
}

업데이트 시 이 서비스를 주입하고 구독하는 구성 요소가 있어야 합니다.

@Component() export class UserComponent {
    constructor(private userService: UserService) {
        this.userService.currentUser
            .subscribe((user) => {
                // I want to see not null value here
            })
    }
}

에 적용하고 싶은 것이 있습니다.Observable<User>모든 null 값을 필터링하고 다음과 같은 경우에만 구독을 시작합니다.User실제로 로드되었습니다.

값을 확인하는 다른 방법은 다음과 같습니다.

public currentUser = this.currentUserSubject
                         .asObservable()
                         .filter<User>(Boolean)
                         .distinctUntilChanged(); 

와 함께rxjs@6및 typescript 권장(읽기/읽기 가능) 방법은 다음과 같은 형식 가드를 정의하는 것입니다.

export function isNonNull<T>(value: T): value is NonNullable<T> {
  return value != null;
}

그리고 주제를 확대합니다.pipe그리고.filter:

subject.pipe(filter(isNonNull))

관찰 가능한 체인에 필터 연산자를 추가합니다.null을 명시적으로 필터링하거나 사용자가 진실인지 확인하기만 하면 됩니다. 필요에 따라 전화를 걸어야 합니다.

null 사용자만 필터링:

public currentUser = this.currentUserSubject
                         .asObservable()
                         .filter(user => user !== null)
                         .distinctUntilChanged(); 

다음과 같이 간단합니다.

filter(user => !!user),

따라서 이러한 잘못된 값을 필터링할 수 있습니다(MDN의 Falsy 링크).또는 다음과 같은 부울로 캐스팅됩니다.

filter(user => Boolean(user)),

사용자가 false로 평가하면 필터가 통과되지 않습니다.

---

업데이트(Mick이 유형 확인에 대해 언급한 후):

올바른 유형 스크립트 솔루션을 추가하려면 유형 술어(사용자 정의 유형 가드)를 사용할 수 있습니다.https://www.typescriptlang.org/ 에서 이에 대한 설명서를 참조하십시오.

수업이 있다고 가정합니다.User예:

const isUser = (user: null|User): user is User => {
  // Using an instance of check here, which is not the most performant
  // but semantically most correct.
  // But you could do an alternative check and return a boolean instead
  return user instanceof User;
}

이제 다음 작업을 수행할 경우:

filter(user => isUser(user));

유형 스크립트는 유형의 개체가 있음을 이해합니다.User필터 뒤에.

rxjs@6의 다른 옵션은 다음의 다른 래핑 연산자를 만드는 것입니다.skipWhile.

// rxjs.utils.js
export const skipNull = () => <T>(source: Observable <T>): Observable<T> => source.pipe(skipWhile(value => value === null));

용도:

this.observable.pipe(skipNull()).subscribe(...)

애초에 BehaviorSubject를 사용하려는 이유는 무엇입니까?

필요한 것은 사용자가 업데이트될 때 데이터를 얻을 수 있도록 상태를 ReplaySubject로 정의하는 것입니다.

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

// two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);

// two subscribers will get new value => output: 456, 456
subject.next(456);

VS 재생 제목:

const sub = new ReplaySubject(3);

sub.next(1);
sub.next(2);
sub.subscribe(console.log); // OUTPUT => 1,2
sub.next(3); // OUTPUT => 3
sub.next(4); // OUTPUT => 4
sub.subscribe(console.log); // OUTPUT => 2,3,4 (log of last 3 values from new subscriber)
sub.next(5); // OUTPUT => 5,5 (log from both subscribers)

언급URL : https://stackoverflow.com/questions/43043517/filter-all-null-values-from-an-observablet