How do I emit the value of an observable to an rxjs Subject?

2
votes

I'd like to provide an rxjs Subject from an Angular service to be able to emit values (via next) by calling methods on the service. One of the values I want it to emit is the result of an Angular HttpClient get call. I just can't seem to get it right. I am wondering why the following results in the subscribe handler not being called:

-View

export default abstract class TileView implements OnInit {
  constructor (private configService : ConfigService) {}
  ngOnInit () {
    this.configService.fetch(this.type()).subscribe( res => {
      console.log(res)
    }); 
  }
}

-Service

export class ConfigService {
  public subject = new AsyncSubject();

  constructor (private http : HttpClient) {}

  fetch (type) {
    this.http.get(
      api.host + api.base + interpolate(api.config, { type }) + "/"
    ).subscribe( res => {
      this.subject.next(res);
    });

    return this.subject;
  }
}

Is there any way to return the subject and also fire off the http call with a single method call? It's strange because the subject is returned, a subscriber is registered, the http call completes and this.subject.next(res) is called but the subscribe handler doesn't even run.

4
angularrxjsobservablebehaviorsubject
where are you subscribing to the subject? You've created the 'next', but what is listening for it? – Farasi78
The subject is returned by the call to fetch from the View which I show there. The subscribe is happening there. – papiro
I am not sure I understand fully what you are trying to achieve. If you are subscribing to fetch, it will return the results of your get. Just call service.fetch wherever you want the results. Http.get constructs an observable. angular.io/api/common/http/HttpClient – Farasi78
That's what I'm saying is that it's not working. I'm subscribing to fetch and the subscriber never fires, even thought the http call is finishing successfully with data. – papiro
The http.get is already observable and can be subscribed to without a subject. Simply return the res from your get subscription and you're done, I don't think you need a subscription like this: fetch (type) { this.http.get( api.host + api.base + interpolate(api.config, { type }) + "/" ).subscribe( res => { return res }); – Farasi78

4 Answers

1
votes

Pierre, the reason this happens is because AsyncSubject only emits the last value when the observable completes (determined by Subject.prototype.complete()).

In your case, you'd likely want to use a BehaviorSubject, which emits the last value in the stream, for subscribers regardless of completion:

An AsyncSubject emits the last value (and only the last value) emitted by the source Observable, and only after that source Observable completes. (If the source Observable does not emit any values, the AsyncSubject also completes without emitting any values.)

Subject Documentation

Update:

If you are reluctant to use a BehaviorSubject because of the initial value propagation, use ReplaySubject(1).

1
votes

complete the observable and it will work

fetch (type) {
    this.http.get(
      api.host + api.base + interpolate(api.config, { type }) + "/"
    ).subscribe( res => {
      this.subject.next(res);
      this.subject.complete();
    });

    return this.subject;
  }

another approach is to use BehaviourSubject, in that case you need to handle null check as BehaviourSubject needs default value

public behaviourSub = new BehaviorSubject(null);

this.configService.fetch(this.type()).subscribe( res => {
    if (res !== null) {
      // actual value emitted
    }
});
1
votes

One of the particularity of the AsyncObservable is that he wait the "complete()" to be done before sending the informations

It's not necessary since the AsyncSubject extend Observable, but I suggest you to use "return this.subject.asObservable()" which is part of the "Subject" object. Since you need to use it on other type of subject, if you change the type of you subject by BehaviourSubject for example you will not need to change your code ;)

0
votes

Subscribe to the 'subject' in your view not to fetch. And no need to return the subject from your service also.

view:

export default abstract class TileView implements OnInit {
  constructor (private configService : ConfigService) {}
  ngOnInit () {
    this.configService.subjectChanged(this.type()).subscribe( res => {
      console.log(res)
    }); 
  }
}

Service: export class ConfigService {

  public subjectChanged = new Subject();

  constructor (private http : HttpClient) {}

  fetch (type) {
    this.http.get(
      api.host + api.base + interpolate(api.config, { type }) + "/"
    ).subscribe( res => {
      this.subjectChanged.next(res);
    });
  }
}