javascript - why observable pipe is not working in component? - Stack Overflow

admin管理员组

文章数量:1403493

I have an observable which is maked with firebase/fireStore. if I subscribe this observable in ponent it works . but If I pipe this observable it doesn't work even though i expect . and I am not getting any error. my question; why it doesn't work?

my codes;

service;

getLastSeans(uid) {
    return this.afs.doc<any>(`users/${uid}/lastseans/seansLive`).valueChanges();
  }

ponent;

with pipe it doesn't work

this.roomService.getLastSeans(this.userId).pipe(map(x=>{console.log(x);return x;}));

if I subscribe it work like this;

this.roomService.getLastSeans(this.userId).subscribe(x=>console.log(x));

I want to learn why this happen?

I have an observable which is maked with firebase/fireStore. if I subscribe this observable in ponent it works . but If I pipe this observable it doesn't work even though i expect . and I am not getting any error. my question; why it doesn't work?

my codes;

service;

getLastSeans(uid) {
    return this.afs.doc<any>(`users/${uid}/lastseans/seansLive`).valueChanges();
  }

ponent;

with pipe it doesn't work

this.roomService.getLastSeans(this.userId).pipe(map(x=>{console.log(x);return x;}));

if I subscribe it work like this;

this.roomService.getLastSeans(this.userId).subscribe(x=>console.log(x));

I want to learn why this happen?

• javascript
• angular
• firebase
• rxjs
• observable

Share Improve this question Follow asked Apr 6, 2020 at 10:13 necatinecati 18711 silver badge1010 bronze badges 2

• 1 Observable start running pipe methods only when you subscribe its. – Beniamin Commented Apr 6, 2020 at 10:18
• Does this answer your question? Angular2 http.get() ,map(), subscribe() and observable pattern - basic understanding – Edric Commented Apr 6, 2020 at 10:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Adding a pipe does not force the observable to be evaluated, it creates the new observable instance with extra logic defined in pipes, according to docs:

A Pipeable Operator is a function that takes an Observable as its input and returns another Observable

To evaluate the new observable, you have to subscribe to it, e.g. using the .subscribe call:

this.roomService.getLastSeans(this.userId)
    .pipe(map(x=>{
        console.log(x);
        return x;
    })).subscribe();

Please note, that empty .subscribe is acceptable here, as the logic is defined in the pipes.

Or, altering the template to use the AsyncPipe, e.g:

<app-live-sean *ngFor="let item of liveSeans | async"></app-live-sean>

Assuming that liveSeans is the field of the ponent, which sets as

this.liveSeans = this.roomService.getLastSeans(this.userId)
    .pipe(map(x=>{
        console.log(x);
        return x;
    }));

In this case AsyncPipe will subscribe to it, receive the results and unsubscribe from the observable, keeping the memory safe without leaks.

本文标签： javascriptwhy observable pipe is not working in componentStack Overflow