Как правильно обработать массив объектов для md-table в общем компоненте?

Question

[Ivan Stroykin]

Доброго времени суток,

Как известно для Angular вышел datatable material design. Но так как он составной (нужно писать сортировки, фильтры и прочее), делаю общий компонент, дабы один раз все это прописать ну и про плюшки конечно же не забыть.
Но никак не могу разобраться с передачей данных в сам md-table. Пример на Plunker
То есть, допустим, в основном компоненте я принял с backend данные, обработал и дальше передаю в общий компонент MdTableComponent. И вот тут загвоздка.
Во-первых, данные захардкожены. А нужно сделать запрос на back, получить данные, обработать их и только потом отправить на построение таблицы.
Во-вторых, получается два класса в основном компоненте, а это значит, что пока идет запрос я не могу передавать какие-то параметры, к примеру включение прелоадера или другое

...Прошу прощения, не ту ссылку на Plunker дал. Обновил

Answer 1

[0X12eb]

Вам поможет определение своего кастомного DataSource, наследуемого от типизированного из '@angular/cdk'
В дальнейшем посоветовал бы сделать его один раз генерик с общими параметрами для Вас (будь то сортировка, фильтрация или другими постпроцессорами)

export class CustomDataSource extends DataSource<T> {

  constructor(
      private _customService: CustomService, 
      private _paginator: MdPaginator) { }

  connect(): Observable<T[]> {
    const displayDataChanges = [
      this._customService.getAllObjects(),
      this._paginator.page
    ];

    return Observable.merge(...displayDataChanges).map((data, page) => {
      const clonedData = data.slice();

      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    })
  }

  disconnect() {}
}

Comments

[Ivan Stroykin]

Мне важно, чтобы в основном компоненте я мог получить данные, выполнить с ними некоторые манипуляции, плюс ко всему, во время получения данных показывать прелоадер (сейчас так и делается) и после всех необходимых обработок кинуть в общий компонент datatable, который все соберет.
Грубо говоря, есть у меня в итоге массив объектов, который нужно передать в компонент datatable. Но md-table ждет DataSource и вот тут я торможу...:(

[0X12eb]

Что за манипуляции могут проводиться над массивом объектов снаружи компонента, а не в самом DataSource?
Прелоадер как раз и должен работать внутри DataSource:

ts:

export class CustomDataSource extends DataSource<T> {
  resultsLength: number = 0;
  isLoadingResults: boolean;
  isRateLimitReached: boolean;

  constructor(private _customService: CustomService,
              private _sort: MdSort,
              private _paginator: MdPaginator) {
    super();
  }

  connect(): Observable<T[]> {
    const displayDataChanges = [
      this._sort.mdSortChange,
      this._paginator.page,
    ];

    this._sort.mdSortChange.subscribe(() => {
      this._paginator.pageIndex = 0;
    });

    return Observable.merge(...displayDataChanges)
        .startWith(null)
        .switchMap(() => {
          this.isLoadingResults = true;
          return this._customService.getAllObjects(
              this._sort.active, this._sort.direction, this._paginator.pageIndex);
        })
        .catch(() => {
          this.isRateLimitReached = true;
          return Observable.of(null);
        })
        .map(result => {
          this.isLoadingResults = false;
          return result;
        })
        .map(result => {
          if (!result) { return []; }

          this.isRateLimitReached = false;
          this.resultsLength = result.json().total_count;

          return result.json();
        });
  }
  disconnect() {}
}

html:

<div class="container">
    <div class="custom-loader" *ngIf="dataSource.isLoadingResults || dataSource.isRateLimitReached">
        <md-spinner *ngIf="dataSource.isLoadingResults"></md-spinner>
        <div class="cstom-rate-limit-reached" *ngIf="dataSource.isRateLimitReached">
            Превышено время ожидания ответа.
        </div>
    </div>
    <md-table #table [dataSource]="dataSource" class="custom-table" mdSort mdSortActive="created" mdSortDisableClear mdSortDirection="asc">
        <ng-container cdkColumnDef="number">
            <md-header-cell *cdkHeaderCellDef> Number </md-header-cell>
            <md-cell *cdkCellDef="let row"> {{row.number}} </md-cell>
        </ng-container>
        <!-- Генерим свои строки -->
        <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
        <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
    </md-table>
    <md-paginator [length]="dataSource.resultsLength" [pageSize]="30">
    </md-paginator>
</div>

[Ivan Stroykin]

0X12eb: Вы можете показать на Plunker? Потому что я пока что не совсем вникаю как это решает мою проблему :(

[0X12eb]

Иван Стройкин: Не обещаю, возможно поздним вечером сегодня.

[Ivan Stroykin]

0X12eb: буду признателен

[0X12eb]

Иван Стройкин: Пользуйтесь: Plnkr

[Ivan Stroykin]

0X12eb: Мощно ) Только приехал, поэтому не отвечал. Завтра попробую все перенести с вынесением в шареный компонент. Посмотрим что в итоге получится
Спасибо большое :)

[Ivan Stroykin]

0X12eb: Попробовал просто реализовать со своим запросом на back, все ок ) Чувствуется как не хватает фильтров по необходимым столбцам. Надеюсь скоро сделают такую возможность