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

user_3878933 0
Viewed 8643

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.

behaviorsubject observable rxjs angular
4 Answers

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

user_41356700

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

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

user_41561420

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);
    });
  }
}
user_68951060
Related