角度垫分页器页面大小无法正常工作

Question

I have created a mat-paginator element for a mat-table. My issue is that the paginator is not correctly displaying the page size. It will display all the results on one page, despite the page size being 5.Here I am making a request to an API to get a list of transactions, then adding them to a list to be displayed in the table. I have tried all the possible solutions I have found with no success.

export class txns implements OnInit {
      ELEMENT_DATA: ISalesOrders[] = []; 
      displayedColumns = ['type', 'source', 'amount']; 
      panelOpenState: boolean = false; 

      expandedElement: any;
      dataSource = new MatExpandTableDataSource(this.ELEMENT_DATA);
      config:any; //App Configuration
      errorLoading:boolean = false; 
      doneLoading:boolean = false; 




    @ViewChild('paginator') paginator: MatPaginator;//Creates horizontal link with paginator

    isExpansionDetailRow = (i: number, row: Object) => 
    row.hasOwnProperty('detailRow');//Determines whether the the row is expandable.

/**
 * Similar to constructor, NgINIT will wait until components dependencies are loaded.
 */
ngOnInit() {
    this.getMonthlySalesTransactions(3).subscribe(data => {
        console.log(data);
        data.forEach((data) => {
            if(data.result === 0) {
                let results = data.objs as ISalesOrders[];
                results.forEach(elem => {
                    this.ELEMENT_DATA.push(elem);
                });



            } else {
                this.errorLoading = false;
            }
            this.doneLoading = true;


        });
        this.dataSource = new MatExpandTableDataSource(this.ELEMENT_DATA);
        this.dataSource.paginator = this.paginator;

    });



}

And the html template:

<div class="example-container mat-elevation-z8">
<p>{{ 'desc.recent-txns' | translate }}</p>
<mat-progress-bar mode="indeterminate" *ngIf="!doneLoading"></mat-progress-bar>
<h1 *ngIf="doneLoading && ELEMENT_DATA.length == 0">{{ 'no-transactions' }}</h1>
<mat-table #table [dataSource]="dataSource" *ngIf="ELEMENT_DATA.length != 0">

    <!-- Position Column -->
    <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef> {{ 'transaction-type' | translate }} </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element.Brand_Group }} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="source">
        <mat-header-cell *matHeaderCellDef> {{ 'source' | translate }} </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element.Source_Account_Name }} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="amount">
        <mat-header-cell *matHeaderCellDef> {{ 'amount' | translate }} </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element.Original_Amount | currency:config.currencyCode}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
        <mat-cell *matCellDef="let detail">
            {{ 'transaction-id' | translate }}: {{ detail.element.Transaction_ID }} <br>
            {{ 'timestamp' | translate }}: {{ detail.element.Transaction_Time | date }} <br>
            {{ 'status' | translate }}: {{ detail.element.Status }} <br>
            {{ 'source-fees' | translate }}: {{ detail.element.Source_Fees_1 | currency:config.currencyCode }} <br>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"
                     matRipple
                     class="element-row"
                     [class.expanded]="expandedElement == row"
                     (click)="expandedElement = row"></mat-row>
    <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
                     [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
                     style="overflow: hidden">
    </mat-row>



</mat-table>

<mat-paginator #paginator
                             [pageSize]="10"
                             [pageSizeOptions]="[5, 10, 20]"
                             [showFirstLastButtons]="true">
</mat-paginator>

Result:

https://imgur.com/a/5WS0i4m

but I only want 5 elements per page. any help is appreciated

i also want to have the ability to expand rows on click, so I created MatExpandTableDataSource class to let me do this. I believe this is were the problem is happening. If I switch to use MatTableDataSource it works, but it does not work properly when using this class.

`

export class MatExpandTableDataSource extends MatTableDataSource<any> {
/** Connect function called by the table to retrieve one stream containing 
the data to render. */
ELEMENT_DATA: ISalesOrders[];

/**
 * Constructor for ExpandableTableDataSource
 * @param ELEMENT_DATA
 */
constructor(ELEMENT_DATA: ISalesOrders[]) {
    super();
    this.ELEMENT_DATA = ELEMENT_DATA;
}

/**
 * Returns list of details listed inside expandable item
 * @returns {any} Observable<Element[]>
 */
connect(): any {
    const rows:any = [];
    this.ELEMENT_DATA.forEach(element => rows.push(element, { detailRow: true, element }));
    return of(rows);
}

disconnect() { }

}

Answer 1

You have to make some kind of link between the table and mat-paginator component to communicate with each other which can be achieved via angular Page lifecycle hook AfterViewInit .

    import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

     export class txns implements OnInit,AfterViewInit { 

      //MatPaginator is keyword here
      @ViewChild(MatPaginator) paginator: MatPaginator; 

     //declare your datasource like this 
      dataSource = new MatTableDataSource;

     //initialize your datasource like this 
      this.someservice.getData()
      .subscribe((data: any[]) => {
        this.dataSource .data = data as any;
      });

      //rest of your code..
      ngAfterViewInit(): void {   
            this.dataSource.paginator = this.paginator;
          }
        }

html #paginator must be there

<mat-paginator #paginator
                             [pageSize]="10"
                             [pageSizeOptions]="[5, 10, 20]"
                             [showFirstLastButtons]="true">
</mat-paginator>

Answer 2

Using an *ngIf directive in mat-paginator will fix this.

<mat-paginator [length]="total"
               [pageIndex]="page_index"
               [pageSize]="per_page"
               [pageSizeOptions]="[10, 20, 50, 100]"
               showFirstLastButtons
               (page)="onChangedPageSize($event)"
               *ngIf="!doneLoading"> <!-- this line -->
</mat-paginator>

Answer 3

If you are trying to get data from an api, you can initialize the paginator after the result of the api call.

for example:

this.myProvider.getData(...).subscribe(res=>{
    this.dataSource = new MatTableDataSource<...>(...);
    this.dataSource.paginator = this.paginator;
})

It works for me !