angular - 複数の MatTableDataSource で観察可能

Question

ページに複数のマットテーブルを表示するAngular 6アプリケーションがあります。json は次のようになります。

"job-detail": 
    {
      "JobId": "480960",
      "jobDocMetadata":
        [
            {
                "seq": "1",
                "docID": "524126",
                "type": "Print",
                "title": "Sample"               
            },
            {
                "seq": "2",
                "docID": "524125",
                "type": "Print",
                "title": "Sample"               
            }           
        ],
        "jobStatusHistory":
        [
            {
                "date": "12-04-2018 12:47:16 CST",
                "code": "200",
                "jobStatus": "Job Undergoing Composition",
                "description": "received a new job"
            },
            {
                "date": "12-04-2018 12:48:14 CST",
                "code": "315",
                "jobStatus": "Job successfully delivered",
                "description": "job finished,"
            }           
        ],
        }

jobDocMetadata と jobStatusHistory のデータを同じページの 2 つの別々のマット テーブルに表示しようとしています。これは、残りのサービスからデータを取得するサービスです。

findJobDetail(jobID: number): Observable<JobDetail> {
    return this.httpClient.get<JobDetail>(`${this.JOB_DETAIL_URL}`, customHttpOptions).pipe(
      tap(_ => this.log(`Found Job`)),
      catchError(this.handleError<any>('findJobDetail')),
    );
  }

そして、これはこれまでのところ、オブザーバブルをサブスクライブするコンポーネント コードであり、正常に動作しています。

     public jobDetailObs: Observable<JobDetail>;
     public jobDetail: JobDetail;
     jobDocMetadataDS: MatTableDataSource<JobDocMetadata>;
     jobStatusHistoryDS: MatTableDataSource<JobStatusHistory>;
     @ViewChildren(MatSort)
     sort = new QueryList<MatSort>();

      this.apiService.findJobDetail(this.id).subscribe(
      data => {
        this.jobDetail = data as JobDetail;

        this.jobDocMetadataDS = new MatTableDataSource(this.jobDetail.jobDocMetadata);
        this.jobDocMetadataDS.sort = this.sort.toArray()[0];

        this.jobStatusHistoryDS = new MatTableDataSource(this.jobDetail.jobStatusHistory);
        this.jobStatusHistoryDS.sort = this.sort.toArray()[1];
             }
        )

テンプレートサンプルはこちら。

<h2 class="mat-h2 subheader">Job Document Metadata</h2>
    <div class="mat-elevation-z8">
        <mat-table #table [dataSource]="jobDocMetadataDS" matSort>
            <ng-container matColumnDef="seq">
                <mat-header-cell *matHeaderCellDef mat-sort-header> Seq </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.seq}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="docID">
                <mat-header-cell *matHeaderCellDef mat-sort-header> Doc ID </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.docID}}</mat-cell>
            </ng-container>

オブザーバブルへのサブスクライブよりも優先されているため、非同期パイプを使用するようにこのコードを変更しようとしています。このために、データソースを Observable にバインドしようとしています。

this.jobDetailObs = this.apiService.findJobDetail(this.id).pipe(share());

私の質問は、2 つのデータソースを JobDetail の Observable にバインドする方法です。必要なデータは JobDetail 内にあるため、Observable をデータ ソースに直接バインドできませんでした。そこで、このマッピングを実現するために、JobDetail の Observable を JobDetail オブジェクト (jobDetailObs から jobDetail) に変換することを考えています。これが最善の方法ですか?もしそうなら、どうすればそれを達成できますか?