如何将MatPaginator附加到来自角材料表中服务器的数据源？

Question

我在Angular 5项目中使用Angular Material表创建网格。我的数据来自http请求，并将其分配给名为dataSourceNew的变量，如view.ts文件中所示。这里dataSourceNew具有动态内容和结构，因此我不导出任何接口。

      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时：该对象的paginator元素为空：如何在不创建任何接口的情况下使用角形材质的paginator？

更新：

在David的建议下：我已将MatPaginator添加到主应用程序模块的导入中。现在，分页块显示完美。

但是当前记录显示为“ 0之0”。即使我有14条记录，分页功能（如更改记录数，下一条，上一条等）也无法正常工作。我缺少什么？

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

更新3：根据Pierre Mallet的建议，我做了必要的更改。现在没有明确告诉[长度]总记录是从api响应中推断出来的。分页器也已正确绑定到我的分页器， this.matdatasource = new MatTableDataSource([]);因此到目前为止，尚未进行任何明确的编码来实现此目的。

现在，我只想首先获取少量记录（比如说20条记录），然后再从后续请求中进行数据库调用，这样就不必一次为所有记录命中db。如何实现呢？

Answer 1

您必须先等待分页器实例化，然后再将其“链接”到MatTableDataSource，因此通常情况下，您会听AfterViewInit钩子来获得分页器 @ViewChild(MatPaginator) paginator: MatPaginator;

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

1. 初始化一个空的数据源
2. 数据准备好后填充dataSource
3. 渲染视图后链接分页器

你可以试试这个吗？

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

}