angular - 初期化コードを実行する前に、(非同期パイプを使用して) テンプレート内のオブザーバブルがサブスクライブされるのを待つ方法は?

Question

特定のアイテム ID が渡されると、いくつかの情報を返す HTTP サービスがあります。これはSubject、 thenngOnInitメソッドで最初のデータを受け取った によって行われます。

次に、asyncパイプを使用して、サービスから返されたデータを HTML に表示します。

私の問題は、最初のアイテム ID でasync呼び出した時点でパイプがオブザーバブルをサブスクライブしていないことです。したがって、これは初期化時に表示されません。selections.next

最初のデータをサブジェクトに送信して最初の HTTP リクエストを開始する前に、asyncパイプがサブスクライブするまで待つにはどうすればよいですか?Observable

さまざまなライフサイクル フックを試しましたが、どれも機能していないようです。

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { Subject } from "rxjs/Subject";

import { ExampleService } from "./example.service";

import "rxjs/add/operator/switchMap";

@Component({
  template: `
    <div>
      <div *ngFor="let time of times | async">{{ time }}</div>
    </div>
  `,
})
export class ExampleComponent implements OnInit {

  times: Observable<string[]>;

  constructor(
    private exampleService: ExampleService
  ) { }

  ngOnInit() {

    var itemIds = new Subject<number>();

    this.times = itemIds
      .switchMap(itemId => this.exampleService.getData(itemId))
      .map(data => this.calculateTimes(data));

    // Pass an item ID to the subject.
    // This is done periodically as well as
    // on init.
    itemIds.next(10);
  }

  calculateTimes(data: string[]) {
    /*
     * Some processing code.
    */

    return data;
  }
}