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

Posted 2023-02-22

【中文标题】单页分页问题中的多个角度材料表

【英文标题】：multiple angular material table in single page pagination issue

【发布时间】：2019-05-19 13:53:04

【问题描述】：

我在单个 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;


    );
  

你能帮我解决第二个表格分页问题吗？

【问题讨论】：

你能用示例数据创建 stackblitz 链接吗？

这个问题难找吗？

您的问题中缺少HTML，也很容易从stackblitz中找到问题。

绝对错误的是：this.errordataSource.errorpaginator = this.errorpaginator;，它应该是this.errordataSource.paginator = this.errorpaginator;。我假设在重构变量时您也意外更改了此属性。

【参考方案1】：

**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（数据源是表1 html代码中的源名称） this.dataSource.paginator = this.paginator;

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

【参考方案2】：

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

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

【参考方案3】：

正如评论中所述，this.errordataSource.errorpaginator = this.errorpaginator; 此处的这行代码是错误的，数据源上没有 errorpaginator 属性。应该是this.errordataSource.paginator = this.errorpaginator;。

查看 stackblitz here，如果您取消注释错误的代码行并注释正确的代码行，您会发现它不适用于您的代码，但正确的代码行。

【讨论】：

在您的代码中，您使用了 of(DATA2).pipe(delay(2500))。但我的代码使用 this.arinvoiceheaderService.getArInvoiceHeader()。我如何将您的代码添加到我的解决方案中。

如果你能检查的话，会有很大帮助 .. :)

这只是为了模拟对数据的异步请求，因为我无权访问您的服务来获取数据。只需将of(DATA2).pipe(delay(2500)) 替换为您的代码this.arinvoiceheaderService.getArInvoiceHeader()。但是，您真正需要更改代码的只是这一行 this.errordataSource.paginator = this.errorpaginator;。

我改变了它。但我的第二个表格加载时没有分页。分页 div 也找不到。

这是工作的基本代码块吗？？ of(DATA2).pipe(延迟(2500))