反應角材料數據表

Question

我用這個ng generate @angular/material:material-table命令創建了一個Angular Material Data Table，它給了我以下文件結構：

• 表datasource.ts
• table.component.ts
• table.component.html

這里的想法是在table-datasource.ts進行所有獲取，排序和分頁。 默認情況下，數據放在table-datasource.ts中的一個數組table-datasource.ts但在我的情況下，它來自一個公開一個Observable of Array的ngxs-store。 我有以下實施：

表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

表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()這樣的解決方案像這樣在取在comonent不希望完成。 此外，這沒有實施排序。
• 該應用程序使用的ngxs-store與ngrx非常相似，因此歡迎涉及此部分的任何解決方案。
• 我還沒弄清楚如何處理pageEvents所以我的猜測是解決方案是在handlePage()方法中。

版本：

• RxJS 6.3.x
• Angular 7.x
• ngxs 3.3.x

Answer 1

我想出了如何根據我的要求設置表格。 主要的變化是我刪除了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);
  }
}

基本上，該服務從任何Observable輸入獲取數據，並在getAllItems方法中將其與初始值合並。

Component有一個這個服務的實例：

private _dataService: DataService | null;

它在load方法中移交給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;
    });
  }

我在TableDataSource中沒有DataService引用的原因是Component中的paginator需要表的長度進行渲染（見下文）。

TableDataSource使用如下的DataService ：

• 在connect方法中，它包含一個包含可能的數據突變的數組：

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

• 數組的_dataChange成員通過從我們的DataService訂閱getAllItems方法獲取它的值：

   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上使用 。

Answer 2

哇！
幾乎在同一時間，我寫了一篇關於我的Reactive DataSource的文章，可以很容易地擴展到多個數據列表！ 您可以添加可選和必需的 mutator ，並附帶getter函數來收集相應的參數並將它們合並到REQuest對象中。

我在這里解釋了整體內容：
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

我在StackBlitz上安裝了一個演示程序，並使用Gi​​thub repo顯示簡單提交，以簡潔的方式設置過濾/排序/分頁列表是多么簡單。

我希望你能給我一些關於我圖書館的反饋，
如果你覺得它很有吸引力，我可以肯定也會用你的用例支持你:)

快樂的編碼！