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

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

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

您必须在表和 mat-paginator 组件之间建立某种链接相互通信，这可以通过有角度的Page生命周期挂钩 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 3

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

例如：

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

对我有用！

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

3 个答案: