Наблюдаемый с несколькими MatTableDataSource - PullRequest
Новая
       25

Наблюдаемый с несколькими MatTableDataSource

0 голосов
/ 11 декабря 2018

У меня есть угловое приложение, которое отображает несколько таблиц мат на странице.Вот как выглядит 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 отдельных таблицах mat на одной странице.Вот служба, которая получает данные от службы отдыха. 

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 источника данных с Observable из JobDetail.Я не мог связать Observable напрямую с источником данных, так как нужные мне данные находятся внутри JobDetail.Поэтому я думаю преобразовать Observable of JobDetail в объект JobDetail (jobDetailObs to jobDetail) для достижения этого отображения.Это лучший способ сделать это, и если да, то как мне этого добиться?

1 Ответ

0 голосов
/ 12 декабря 2018

включено перед монтированием компонента, вы должны создать две наблюдаемые из 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>))

и использовать в шаблоне с асинхронным каналом

...