Question

我有一个angular 6应用程序，该应用程序在页面中显示多个mat-tables。这是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,"
            }           
        ],
        }

我正在尝试在同一页面的2个单独的Mat表中显示来自jobDocMetadata和jobStatusHistory的数据。这是从休息服务获取数据的服务。

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。我无法将Observable直接绑定到数据源，因为我需要的数据在JobDetail内部。因此，我正在考虑将JobDetail的Observable转换为JobDetail对象（将JobDetailObs转换为jobDetail）以实现此映射。这是最好的方法吗？如果是，我如何实现它？

Answer 1

在安装组件之前，应从findJobDetail创建两个可观察对象

const findJobDetail$ = this.apiService.findJobDetail(this.id).pipe(share())

this.jobDocMetadataDS$ = findJobDetail$.pipe(map(<map from job detail to doc meta>))
this.jobStatusHistoryDS$ = findJobDetail$.pipe(map(<map from job detail to status history>))

并在带有异步管道的模板中使用

可通过多个MatTableDataSource观察到

1 个答案: