Question

考虑这个简单的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]
  }

这是模板：

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

它不起作用（'foo'没有打印，没有数据显示），除非我取消注释指示[1]的行。为什么模板不会触发observable自动执行？

有没有比使用空白订阅更好的方法？

Answer 1

好的，我不确定原因，但诀窍是在BehaviourSubject上使用Subject代替this.inspectShipSubject。

这很好用，并且由模板正确触发。

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

模板：

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

Answer 2

我不确定这是一个好的解决方案（或只是一种解决方法），但您可以将每个事件存储在一个数组中，然后循环该数组：

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

编辑：我刚刚意识到我不确定您是要显示房间列表还是仅显示最新收到的房间。如果您只需要最新版本，那么我认为您不需要ngFor指令。

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

2 个答案: