angular - 如何将 MatPaginator 附加到 Angular Material 表中来自服务器的数据源？

Question

我正在使用 angular Material table在我的 Angular 5 项目中创建网格。我的数据来自 http 请求，并在 view.ts 文件中分配给一个名为 dataSourceNew 的变量。这里的 dataSourceNew 具有动态内容和结构，因此我没有导出任何接口(interface)。

      this.http.get('http://example.org?,{headers: this.headers})
          .subscribe(
          res => { 

           this.displayedColumnsNew = res.record;
           this.dataSourceNew = res.data;
           this.matdatasource = new MatTableDataSource(this.dataSourceNew);
           this.dataSourceNew.paginator = this.paginator;
           console.log("got matdatasource object",this.matdatasource);
      // attached the result of this log below

         });

我能够在 html 文件中使用此语法成功创建数据表。

     <div class="example-container mat-elevation-z8">
           <mat-table #table [dataSource]="dataSourceNew">


       <ng-container  *ngFor="let head of tableData.record; let i= index; " matColumnDef="{{head}}" (click)="setClickedRow(ddata) "  [class.active]="ddata[primaryid] == selectedRow">
               <mat-header-cell *matHeaderCellDef> {{tableData.gridhead[i]}} 
                </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element[head]}} </mat-cell>
         </ng-container>


     <mat-header-row *matHeaderRowDef="displayedColumnsNew"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumnsNew;">
        </mat-row>
            </mat-table>
     </div>

现在我想给这个表附加一个分页，为此我声明了这个

 @ViewChild(MatPaginator) paginator: MatPaginator;

但是当我像这样将分页附加到 html 中的表格时，

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

我在控制台中收到以下错误，它破坏了我的应用程序。

我已经导入了这个

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

在相应的 .ts 文件中。

Uncaught Error: Template parse errors:
Can't bind to 'pageSize' since it isn't a known property of 'mat-paginator'.
1. If 'mat-paginator' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

另外，当我记录 this.dataSourcenew 时:此对象的分页器元素为空:如何在不创建任何界面的情况下使用 Angular Material 分页器？

更新:

根据大卫的建议:我已将 MatPaginator 添加到主应用程序模块的导入中。现在分页 block 显示完美。

但当前记录显示为“0 of 0”。即使我有 14 条记录，并且分页功能(如更改记录数、下一个、上一个等)也不起作用。我缺少什么？

更新 2:我已将属性 Length 应用于分页器标签。现在分页工作正常。问题是现在数据表没有改变当前的编号。的行。

更新 3:根据 Pierre Mallet 的建议，我已完成所需的更改。现在没有明确告诉 [length] 总记录是从 api 响应中推断出来的。此外，分页器与我的 this.matdatasource = new MatTableDataSource([]); 正确绑定(bind)，因此到目前为止还没有明确的编码来实现这一点。

现在我只想最初获取几条记录(比如说 20 条)，然后想从后续请求中调用数据库，这样我就不需要一次访问数据库获取所有记录。如何做到这一点？

Answer 1

在将分页器“链接”到您的 MatTableDataSource 之前，您必须等待它被实例化，所以通常，您会通过 @ViewChild(MatPaginator) paginator: MatPaginator; 收听 AfterViewInit Hook 以获取分页器；

但由于您的数据也是异步的，因此您应该

1. 初始化一个空的数据源
2. 在数据准备好后填充数据源
3. 在呈现 View 后链接分页器

你能试试这个吗？

export class YourComponent implements AfterViewInit {

  private this.matdatasource;

  // get refereence to paginator
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor (private http: HttpClient) {
    // 1/ init
    this.matdatasource = new MatTableDataSource([]);
    this.http.get('http://example.org',{headers: this.headers})
      .subscribe(res => { 
        // 2/ populate with data
        this.matdatasource.data = res.data;
      });
  }
   
  // 3/ link paginator when empty dataSource is created
  // and paginator rendered
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
  
}