Question

我在单个html页面中使用角度两个材料表。第一个表，通过正确的分页可以很好地加载数据。但是在第二张表中，所有数据加载都没有分页。我在两个页面上都添加了分页功能。我想展示一些与此有关的代码。

表1分页（效果很好）

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

表2分页（分页不起作用）

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

我的组件文件

import { Component, OnInit, ViewChild, Input, Inject} from '@angular/core';
import { from } from 'rxjs/internal/observable/from';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { DataSource } from '@angular/cdk/collections';
import { arInvoiceHeaderService} from './ar-invoice-header.service';
import { arInvoiceHeaderModel, arInvoiceHeader } from './ar-invoice-header-model';
import { MatSort, MatSortable, MatPaginator,MatTable, MatTableDataSource } from '@angular/material';
import { Injectable } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {animate, state, style, transition, trigger} from '@angular/animations';
import { FormControl } from '@angular/forms';
import { arErrorModel } from './ar-error-model';
import { MatPaginatorModule } from '@angular/material';
@Component({
  selector: 'app-ar-invoice-header',
  templateUrl: './ar-invoice-header.component.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed, void', style({height: '0px', minHeight: '0', display: 'none'})),
      state('expanded', style({height: '*'})),
      transition('* <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  styleUrls: ['./ar-invoice-header.component.css']
})
@Injectable()
export class ArInvoiceHeaderComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  //@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('errorpaginator') errorpaginator: MatPaginator;
 @ViewChild(MatTable) table: MatTable<any>;
 
  isLoading = true;
  noGridData: boolean = false;
  dataSource = new MatTableDataSource(this.dataSource);
  errordataSource = new MatTableDataSource(this.errordataSource);
  //dataSource;
  //errordataSource;
  expandedElement: arInvoiceHeader;
  displayedColumns = ['id','invoiceNumber','status','orgName','setOfBooks','transactionSource','transactionType','errorCodeH','invoiceTotal','lineCount','interfaceFileLineNo','interfaceFileName','interfaceFilePath','createdBy','creationTimestamp'];
  errordisplayedColumns = ['id','invoiceNumber','lineNumber','interfaceFileName','interfaceFilePath','errorDescription'];


  constructor(private arinvoiceheaderService: arInvoiceHeaderService) {

   }

  ngOnInit() { 

    this.reloadList();
    this.arErrorList();
  }




//First table data loading function (currently working well with pagination )
  reloadList() {
    this.arinvoiceheaderService.getArInvoiceHeader().subscribe(results => {
      console.log(results);
      if (!results) {
       // return;
       alert("ERRor");
      }
    
      this.dataSource = new MatTableDataSource(results['ArInvoiceHeaders']);
      if(results.ArInvoiceHeaders.length > 0)
      {
       
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.isLoading = false;
        this.noGridData = false;
      }
      else{
        this.noGridData = true;
        this.isLoading = false;
      }
      
    });
  }

//seconf table data loading function (all data loading without pagination)
  arErrorList(){
    this.arinvoiceheaderService.getArErrorDetails().subscribe(results => {
      console.log(results);
      if (!results) {
        return;
      }
      this.errordataSource = new MatTableDataSource(results['ArInterfaceErrors']);

      this.errordataSource.errorpaginator = this.errorpaginator;
      this.errordataSource.sort = this.sort;


    });
  }
}

您能帮我解决第二张表的分页问题吗？

Answer 1

多角度材料表为我工作...

表1分页

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

表2分页

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

TS：更改检测器将查找第一个元素。因此，我们可以使用属性.. read-True，用于从查询的元素中读取其他令牌。

    @ViewChild('paginatorlist', { read: MatPaginator }) paginatorlist: MatPaginator;
    @ViewChild(MatPaginator) paginator: MatPaginator;

Answer 2

如注释中所述，此行this.errordataSource.errorpaginator = this.errorpaginator;是错误的，数据源上没有errorpaginator属性。应该是this.errordataSource.paginator = this.errorpaginator;。

请参见堆栈here，如果您取消注释错误的代码行并注释了正确的代码行，则可以看到它不适用于您的代码，但是正确的代码却可以。

Answer 3

**Table 1**

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

**Table 2**
<mat-paginator #modulePaginatpr [pageSizeOptions]="[5, 10, 15, 20]" showFirstLastButtons></mat-paginator>

**componenet.ts**
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild('modulePaginatpr') modulePaginatpr: MatPaginator;

对于table1（datasoure是表1的html代码中的源名称） this.dataSource.paginator = this.paginator;

For table2 (datasoure2 is sourse name in table 2 html code)
this.dataSource2.paginator = this.modulePaginatpr;

单页分页问题中的多角度材料表

表1分页（效果很好）

3 个答案: