Угловой 6 матовый источник данных таблицы с наблюдаемыми - PullRequest
Новая
       27

Угловой 6 матовый источник данных таблицы с наблюдаемыми

0 голосов
/ 05 июля 2018

У меня есть Angular 6 с таблицами матов, получающими связанные данные из двух разных сервисов. Первый сервис извлекает все данные, которые это данные, а затем передает критерий ко второму через mergeMap для извлечения дополнительных данных для каждой записи, возвращаемой в первой.

Моя проблема в том, что я вижу возвращаемые данные без ошибки и таблицу, повторяющую строки в выводе , но ничего не отображается в таблице. Два соответствующих класса: 

export class GetMyShizz implements OnInit{
     dataSource = new IssueDataSource(this.issueService);
     displayedColumns: string[] = ['created', 'updated', 'number', 'title', 'pipeline', 'estimate'];
     constructor(private issueService: IssueService) {}
     ngOnInit() {}
}
export class IssueDataSource extends DataSource<any> {
      constructor(private issueService: IssueService) {
        super();
      }
      connect(): Observable<any> {
        return this.issueService.getIssues()
        .pipe(
            mergeMap((ghIssues) => {
                const zhIssuesQueries: Observable<any>[] = [];
                for (let ghIssue of ghIssues) {
                    zhIssuesQueries.push(this.issueService.getZHIssue(ghIssue.number));
                }
                return forkJoin(...zhIssuesQueries);
            })
        )
      }
      disconnect() {
      }
}

Я вполне уверен, что это связано с тем, как я назначаю DataSource (issueDataSource) для таблицы в первом классе, но не уверен, как сделать ссылку. Это сработало, когда я вызывал только одну службу (до того, как я добавил stoge mergeMap.)

Редактировать (с шаблоном HTML) 

  <div class="issue-table-container">
    <table mat-table [dataSource]="dataSource" class="issue-table"
           matSort matSortActive="created" matSortDisableClear matSortDirection="asc">

      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>Issue #</th>
        <td mat-cell *matCellDef="let row">{{row.number}}</td>
      </ng-container>

      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef>Title</th>
        <td mat-cell *matCellDef="let row"><b>{{row.title}}</b>
        <button mat-raised-button class="label-button" *ngFor="let label of row.labels" [ngStyle]="setBadgeStyles(label.color)">{{label.name}}</button></td>
      </ng-container>

      <ng-container matColumnDef="created">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
          Created
        </th>
        <td mat-cell *matCellDef="let row">{{row.created_at | date:'shortDate'}}</td>
      </ng-container>

      <ng-container matColumnDef="updated">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
          Updated
        </th>
        <td mat-cell *matCellDef="let row">{{row.updated_at | date:'shortDate'}}</td>
      </ng-container>

      <ng-container matColumnDef="estimate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
          Estimate
        </th>
        <td mat-cell *matCellDef="let row">{{row.estimate}}</td>
      </ng-container>

      <ng-container matColumnDef="pipeline">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
          Pipeline
        </th>
        <td mat-cell *matCellDef="let row">{{row.pipeline}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
...