Таблица реактивных угловых материалов

Question

Я создал таблицу данных угловых материалов с помощью этой команды ng generate @angular/material:material-table, и она дала мне следующую структуру файла:

• table-datasource.ts
• table.component.ts
• table.component.html

Идея состоит в том, чтобы выполнить всю выборку, сортировкуи нумерация страниц в table-datasource.ts.По умолчанию данные помещаются в массив внутри table-datasource.ts, но в моем случае они поступают из хранилища ngxs, которое предоставляет Observable of Array .У меня есть следующая реализация:

table-datasource.ts:

export class TokenTableDataSource extends DataSource<TokenTableItem> {
  @Select(TokenTableState.getTokenTableItems) private tokenTableItems$:Observable<TokenTableItem[]>;
  totalItems$ = new BehaviorSubject<TokenTableItem[]>([]);

  constructor(private paginator: MatPaginator, private sort: MatSort) {
    super();
  }

  /**
  * Connect this data source to the table. The table will only update when
  * the returned stream emits new items.
  * @returns A stream of the items to be rendered.
  */
  connect(): Observable<TokenTableItem[]> {
    this.tokenTableItems$.subscribe(item => this.totalItems$.next(item));

    // init on first connect
    if (this.totalItems$.value === undefined) {
      this.totalItems$.next([]);
      this.paginator.length = this.totalItems$.value.length;
    }
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.totalItems$),
      this.paginator.page,
      this.sort.sortChange
    ];

    return merge(...dataMutations).pipe(
      map(() =>  this.totalItems$.next(this.getPagedData(this.getSortedData([...this.totalItems$.value])))),
      mergeMap(() => this.totalItems$)
    );
  }
  ...generated paging and sorting methods

table-component.html:

<div class="mat-elevation-z8">
  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">

  ...multiple columns

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

  <mat-paginator #paginator
      [length]="this.dataSource.totalItems$.value?.length"
      [pageIndex]="pageIndex"
      [pageSize]="pageSize"
      [pageSizeOptions]="pageSizeOptions"
      [showFirstLastButtons]=true
      (page)="handlePage($event)">
  </mat-paginator>
</div>

table.component.ts:

export class TokenTableComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  dataSource: TokenTableDataSource;

  pageSizeOptions = [5, 10, 20, 40];
  pageSize = this.pageSizeOptions[0];
  pageIndex = 0;
  tableLength = 0;

  ... colums definition

  ngOnInit(): void {
    this.dataSource = new TokenTableDataSource(this.paginator, this.sort);
  }

  public handlePage(pageEvent: PageEvent) {
    // do what?
  }
}

Что работает:

• Данные отображаются корректно (сработалис помощью кнопки и через ngxs-store)
• Я могу сортировать данные

Что не работает:

• Вклпри первой загрузке данных pageSize вообще игнорируется, и все строки выводятся
• При щелчке по элементу сортировки или нумерации страниц выбирается текущий выбранный pageSize и отображается количество строк.Что странно для меня, это то, что это работает только по убыванию (учитывая, что pageSize равно 10, и я выбираю 5, это приводит к 5 строкам, но после выбора 5 невозможно отобразить больше строк, чем 5)

Требования:

• Мне нравится идея инкапсулировать все манипуляции с данными, стоящие за TableDataSource.connect(), поэтому решение, подобное this , где выборка выполняется в компонентене желательно.Кроме того, здесь не реализована сортировка.
• Приложение использует ngxs-store , которое очень похоже на ngrx , поэтому любое решение, включающее эту часть, приветствуется.
• Я не понял, что делать с pageEvents , поэтому я предполагаю, что решение заключается в методе handlePage().

Версии:

• RxJS 6.3.x
• Угловой 7.x
• ngxs 3.3.x

Answer 1

WOW!
Примерно в то же время я написал статью о своем Reactive DataSource, которую можно легко расширить для нескольких списков данных!Вы можете добавить необязательные и обязательные мутаторы , сопровождаемые getter функциями, чтобы собрать соответствующие аргументы и объединить их в объект REQuest.

Я объяснил весь материал здесь:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

и я также смонтировал демо на StackBlitz с репозиторием Github, показывающим простые коммиты, насколько просто настроить отфильтрованный /отсортированный / разбитый на страницы список в чистом виде.

Я надеюсь, что вы дадите мне некоторую обратную связь о моей библиотеке,
, и если вы сочтете ее привлекательной, я могу быть уверен, что поддержу вас и вашими вариантами использования :)

Удачного кодирования!

Answer 2

Я понял, как настроить таблицу для моих требований.Основное изменение состоит в том, что я удалил Observable, который выбирает данные из TableDataSource , и ввел DataService :

export class DataService {
  //the @Select is from ngxs but can be anything returning an Observable 
  @Select(TokenTableState.getTokenTableItems) private tokenTableItems$: Observable<TokenTableViewItem[]>;
  private initValue$: BehaviorSubject<TokenTableViewItem[]> = new BehaviorSubject<TokenTableViewItem[]>([]);

  getAllItems(): Observable<TokenTableViewItem[]> {
    const sources = [this.tokenTableItems$, this.initValue$];
    return merge(...sources);
  }
}

По сути, эта служба получает данные из любогоНаблюдаемый ввод и объединение его в методе getAllItems с начальным значением.

Компонент имеет экземпляр этой службы:

private _dataService: DataService | null;

, который он передает TableDatasource в методе загрузки:

private loadData(): any {
    this._dataService = new DataService();
    this.dataSource = new TokenTableDataSource(
      this._dataService,
      this.paginator,
      this.sort
    );
    fromEvent(this.filter.nativeElement, 'keyup').subscribe(() => {
      if (!this.dataSource) {
        return;
      }
      this.dataSource.filter = this.filter.nativeElement.value;
    });
  }

Причина, по которой у меня нет ссылки на DataService в TableDataSource означает, что paginator в Component требуется длина таблицы для рендеринга (см. ниже).

TableDataSource использует DataService следующим образом:

• В методе connect он содержит массив с возможными мутациями данных:

  const dataMutations = [
    this._dataChange,
    this._sort.sortChange,
    this._filterChange,
    this._paginator.page
  ];
  

• Член массива _dataChange получаетэто значение, подписавшись на метод getAllItems из нашего DataService :

  this._internalService.getAllItems().subscribe(data => {
    this._dataChange.next(data);
  });
  

• dataMutations используются какэто для фильтрации, сортировки и возврата данных, которые должны отображаться:

  return merge(...dataMutations).pipe(
    map(() => {
      // Filter data
      this.filteredData = this._dataChange.value
        .slice()
        .filter((item: TokenTableViewItem) => {
          const searchStr = (item.symbol + item.name).toLowerCase();
          return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
        });
      // Sort filtered data
      const sortedData = this.getSortedData(this.filteredData.slice());
  
      // Grab the page's slice of the filtered sorted data.
      this.renderedData = this.getPagedData(sortedData);
      return this.renderedData;
    })
  );
  

filterChange определяется в локальном экземпляре

_filterChange = new BehaviorSubject('');

, в то время как нумерация страниц и сортировка запускаются извне через конструктор

constructor(
  public _internalService: DataService,
  public _paginator: MatPaginator,
  public _sort: MatSort
) {
  super();
  this._filterChange.subscribe(() => (this._paginator.pageIndex = 0));
}

Я также нашел решение для нумерации страниц, котороеопределяется в component.html следующим образом:

<mat-paginator #paginator
  [length]="dataSource.filteredData.length"
  [pageIndex]="pageIndex"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  [showFirstLastButtons]=true>
</mat-paginator>

и с переменными, установленными в component.ts :

pageSizeOptions = [5, 10, 20, 40];
pageSize = this.pageSizeOptions[0];
pageIndex = 0;

Полный код можно увидеть на этом проекте, а живая версия таблицы используется на whatsmytoken.com .