错误类型错误:无法设置未定义的属性“分页器" [英] ERROR TypeError: Cannot set property 'paginator' of undefined

问题描述

我正在使用表格 Angular 材质创建表格作为参考，我正在使用此示例 https://material.angular.io/components/table/examples

I am creating a table using table Angular material for reference I am using this example https://material.angular.io/components/table/examples

这是我目前所拥有的:

HTML

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>


      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
      </ng-container>


      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>


      <ng-container matColumnDef="release">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Release</th>
        <td mat-cell *matCellDef="let row"> {{row.first_air_date}} </td>
      </ng-container>


      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.overview}} </td>
      </ng-container>

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

    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

组件 .ts

when I run my app data are displayed in a table perfectly but I get the following error : 

当我运行我的应用程序时，数据完美地显示在表格中，但出现以下错误:

ERROR TypeError: Cannot set property 'paginator' of undefined

<块引用>

所以排序、过滤或分页都不起作用

So nothing works at all neither sorting , filtering or pagination

我需要一些帮助:

我在上面的代码中做错了什么?任何帮助将不胜感激.

What am I doing wrong in my codes above? Any help will be appreciated.

推荐答案

this.dataSource 时，错误提示您正在尝试分配 this.dataSource.paginator仍然 undefined.在初始化之后完成任务.

The error says that you're trying to assign this.dataSource.paginator when this.dataSource is still undefined. Do the assignment after it was initalized.

另外，当你想使用分页器、排序或过滤器时，你必须使用 MatTableDataSource 类.将原始数据用作 dataSource 是不够的:

Also, when you want to use the paginator, sort or a filter, you have to use the MatTableDataSource class for it. It's not enough to use raw data as your dataSource:

ngOnInit() {
  this.moviesService.getPopularTVShows().subscribe(res => {
    // Use MatTableDataSource for paginator
    this.dataSource = new MatTableDataSource(res.results);
                          ^^^^^^^^^^^^^^^^^^
    // Assign the paginator *after* dataSource is set
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
}

这篇关于错误类型错误:无法设置未定义的属性“分页器"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！