Angular2 Observable isn't triggered by async pipe

Question

Consider this simple snippet of angular2/rxjs/typescript

  public rooms: Observable<Room[]>;      

  constructor ( ... ) {

    this.rooms = this.inspectShipSubject
      .do(() => console.log('foo'))
      .switchMap(ship => this.roomByShipService.getRoomsByShip(ship));

    //this.rooms.subscribe(); // <-- [1]
  }

Here's the template:

<some-component *ngFor="let room of rooms | async" [room]="room"></some-component>

It doesn't work ('foo' is not printed and no data shows) unless I uncomment the line indicated [1]. Why doesn't the template trigger the observable to execute automatically?

Is there a better way than to use a blank subscribe?

Can you try putting the expresion (rooms | async) into parenthesis? — martin
– martin, Commented Aug 18, 2017 at 13:52
Try moving the this.rooms initialization from your constructor to ngOnInit() — Andrei Matracaru
– Andrei Matracaru, Commented Aug 18, 2017 at 13:58
@martin Thanks, I tried that and it didn't make a difference. I'm not sure which is correct because many examples used both styles. — kvanbere
– kvanbere, Commented Aug 18, 2017 at 13:58
Related: stackoverflow.com/a/35302622/1919228. The async pipe already adds a subscription — Pablo Lozano
– Pablo Lozano, Commented Aug 18, 2017 at 14:01
@AndreiMatracaru Thanks, I tried this with the above suggestion and didn't see a difference. — kvanbere
– kvanbere, Commented Aug 18, 2017 at 14:01

kvanbere · Accepted Answer · 2017-08-18 14:23:53Z

3

OK, I'm not sure why, but the trick is to use BehaviourSubject instead of Subject on this.inspectShipSubject.

This works nicely and is triggered properly by the template.

  public rooms$: Observable<Room[]>;

  private inspectShipSubject: BehaviorSubject<Ship> = new BehaviorSubject<Ship>(null);

  constructor(
    ...
  ) { }

  ngOnInit() {
    this.rooms$ = this.inspectShipSubject.switchMap(ship => this.roomByShipService.getRoomsByShip(ship));
  }

  @Input()
  set ship(ship: Ship) {
    this.inspectShipSubject.next(ship);
  }

  get ship(): Ship {
    return this.inspectShipSubject.getValue();
  }

And the template:

<some-component *ngFor="let room of (rooms | async)" [room]="room"></some-component>

answered Aug 18, 2017 at 14:23

kvanbere

3,3823 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrei Matracaru Over a year ago

Oh, you were using a Subject for inspectShipSubject...should have realized that from the name :). To better understand the difference to a BehaviorSubject, have a look at this article

Max Koretskyi Over a year ago

@AndreiMatracaru, so why did it make the difference here?

kvanbere Over a year ago

Please do explain :)

dbandstra Over a year ago

If it's a regular Subject, and you emit a value before you subscribe to it, the subscriber won't get that value. It will only get values emitted after it subscribed. So in your case it probably wouldn't be triggered until the first change happens. Subjects only relay values as they are emitted. Whereas, a BehaviorSubject additionally stores a 'current' value, and will send that value to new subscribers. You must provide an initial 'current' value when you construct the BehaviorSubject (often null), as you did. ReplaySubject is another option you could look into. But I'm out of space

Pablo Lozano · Accepted Answer · 2017-08-18 14:08:26Z

0

I'm not sure if this is a good solution (or just a workaround), but you could store every event in an array and then loop the array:

this.rooms=[];
this.roomsObservable = this.inspectShipSubject
      .switchMap(ship => this.roomByShipService.getRoomsByShip(ship))
      .observe(next =>this.rooms.push(next));

Edit: I have just realized that I'm not sure if you want to show a list of rooms or just the latest received room. In case you just need the latest one, then I think you don't need a ngFor directive.

answered Aug 18, 2017 at 14:08

Pablo Lozano

10.4k2 gold badges43 silver badges64 bronze badges

Collectives™ on Stack Overflow

Angular2 Observable isn't triggered by async pipe

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related