Angular mat-paginator 页面大小无法正常工作

Question

我为 mat-table 创建了一个 mat-paginator 元素。我的问题是分页器没有正确显示页面大小。尽管页面大小为 5，但它会在一页上显示所有结果。这里我向 API 发出请求以获取事务列表，然后将它们添加到要在表中显示的列表中。我已经尝试了所有可能的解决方案，但没有成功。

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;

    });



}

还有html模板：

<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>

结果：

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

但我只想要每页 5 个元素。任何帮助表示赞赏

我还希望能够在单击时扩展行，所以我创建了 MatExpandTableDataSource 类来让我这样做。我相信这是问题正在发生。如果我切换到使用 MatTableDataSource 它可以工作，但是在使用这个类时它不能正常工作。

`

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

您必须在 table 和 ma​​t-paginator 组件之间建立某种链接 可以通过角度页面生命周期挂钩 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 必须在那里

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

Answer 2

在mat-paginator 中使用*ngIf 指令将解决此问题。

<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

如果你试图从一个 api 获取数据，你可以在 api 调用的结果之后初始化分页器。

例如：

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

它对我有用！