Angular2 Observable不是由异步管道触发的

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?

Answer 1

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>

Answer 2

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.