Angular: Paginator показывает все элементы из массива, вместо числа, объявленного в атрибуте [pageSize]

Question

Как я уже писал в заголовке, paginator показывает все данные из dataSource.product массив, но он должен показывать только количество элементов, объявленных в [pageSize] приписывать. Ниже я помещаю свои файлы.html и datasource.ts.

Он работает правильно, когда я удаляю из таблицы атрибутов [dataSource]="dataSource.product" и оставить только *[dataSource]="dataSource"*, но тогда я получу ошибку TypeError: Cannot read property 'length' of undefined, Эта ошибка воспринимается [dataSource]="dataSource" параметр.

table.component.html

<div>
  <button (click)="goToProductAdd()" class="btn btn-success">Dodaj nowy produkt</button>
  <button class="btn btn-primary">Zarządzaj kategoriami produktów</button>
</div>

<div class="product-table">

  <mat-table #table [dataSource]="dataSource.product" matSort aria-label="Elements">

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
      <mat-cell *matCellDef="let product"> {{product.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Nazwa produktu </mat-header-cell>
      <mat-cell *matCellDef="let product"> {{product.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Cena (zł)</mat-header-cell>
      <mat-cell *matCellDef="let product">{{product.price | number:'1.2-2'}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="category">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Rodzaj produktu</mat-header-cell>
      <mat-cell *matCellDef="let product"> {{product.category}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let product; columns: displayedColumns;" (click)="goToProductDetail(product.id)"></mat-row>

  </mat-table>

  <mat-paginator #paginator
      [length]="dataSource?.product?.length"
      [pageIndex]="0"
      [pageSize]="30"
      [pageSizeOptions]="[30, 60, 90, 120]">
  </mat-paginator>
</div>

столовые datasource.ts

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import {ProductService} from '../../service/product.service';

export interface ProductI {
  id: number;
  category: string;
  description: string;
  name: string;
  price: number;
  productType: string;
}

export class ProductTableDataSource extends DataSource<any> {

  product: ProductI[] = [];

  constructor(private paginator: MatPaginator, private sort: MatSort, private productService: ProductService) {
    super();
    this.productService.getAllProducts()
      .subscribe(value => this.product = value);
  }

  connect(): Observable<ProductI[]> {
    const dataMutations = [
      observableOf(this.product),
      this.paginator.page,
      this.sort.sortChange
    ];

    this.paginator.length = this.product.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.product]));
    }));
  }

  disconnect() {}

  private getPagedData(data: ProductI[]) {
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
    return data.splice(startIndex, this.paginator.pageSize);
  }

  private getSortedData(data: ProductI[]) {
    if (!this.sort.active || this.sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort.direction === 'asc';
      switch (this.sort.active) {
        case 'category': return compare(a.category, b.category, isAsc);
        case 'name': return compare(a.name, b.name, isAsc);
        case 'id': return compare(+a.id, +b.id, isAsc);
        case 'price': return compare(+a.price, +b.price, isAsc);
        default: return 0;
      }
    });
  }
}

function compare(a, b, isAsc) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Answer 1

Вам нужно просто вернуться обратно в [dataSource]="dataSource" И в mat-paginator:

<mat-paginator #paginator
  [length]="dataSource?.length"
  [pageIndex]="0"
  [pageSize]="30"
  [pageSizeOptions]="[30, 60, 90, 120]">
</mat-paginator>