0

我有一个 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 个单独的垫表中显示来自 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')),
    );
  }

这是到目前为止的组件代码，订阅了 observable 并且运行良好。 

     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 更受欢迎。为此，我试图将我的数据源绑定到 Observable。

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

所以我的问题是如何将 2 个数据源绑定到 JobDetail 的 Observable。我无法将 Observable 直接绑定到数据源，因为我需要的数据在 JobDetail 中。所以我想把 JobDetail 的 Observable 转换成 JobDetail 对象（jobDetailObs to jobDetail）来实现这个映射。这是最好的方法吗？如果是，我该如何实现？

4

1 回答 1

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>))

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

于 2018-12-12T12:49:59.830 回答