Angular MatPaginator 没有被初始化答案

【问题标题】：Angular MatPaginator doesn`t get initializedAngular MatPaginator 没有被初始化
【发布时间】：2022-04-19 17:00:55
【问题描述】：

我有 2 个组件。两者都有 mat-table 和 paginators 并且分页适用于一个组件而不适用于另一个组件，尽管代码相似。下面是我的html：

<div class="mat-elevation-z8">
    <mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="col1">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Column1 </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.col1}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="col2">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Column2 </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.col2}} </mat-cell>
        </ng-container>

        <!-- Different columns goes here -->

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

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

下面是我在 component.ts 中的代码：

dataSource: MatTableDataSource<any>;
displayedColumns = ['col1', 'col2', ... ];

@ViewChild('scheduledOrdersPaginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

ngOnInit(): void {
    // Load data
    this.dataSource = new MatTableDataSource(somearray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

类似的代码适用于其他组件，并且表格正在正确呈现分页，不知道这段代码有什么问题。

任何帮助将不胜感激

【问题讨论】：

标签： angular pagination angular-material

【解决方案1】：

在我的例子中，<mat-paginator> 元素位于一个容器内，该容器上有一个 *ngIf，直到异步加载数据才呈现。这会导致 this.paginator 成为 undefined，即使在 ngAfterViewInit 中也是如此。这会导致它静默失败，因为 MatTableDataSource 将 paginator 设置为 undefined 没有问题。

解决方案是将<mat-paginator> 移出*ngIf'd 容器

希望这可以帮助与我处于相同情况的人。

【讨论】：

谢谢 - 这就是我的解决方案。我选择使用 [hidden] 而不是 ngIf，这样即使没有任何数据，分页器也会呈现，但不会显示给用户
这是我的问题。聪明！
出色的答案。我遇到了同样的问题
非常感谢，这解决了它，把我的头发拉了出来，因为相同的代码已经在早期的组件上工作过。这里唯一的区别是我通过 @input 向一个哑组件提供数据，而不是请求 onint 数据。
这真令人气愤……但我找到解决问题的唯一方法。

【解决方案2】：

我通过用超时包围实例化解决了类似的问题。试试这个：

setTimeout(() => this.dataSource.paginator = this.paginator);

【讨论】：

它做到了 :) 太疯狂了！！谢谢@tricheriche，但请我知道为什么会出现这种奇怪的行为
angular为此提供了ngAfterViewInit
刷新数据源时不会。
您可以将其替换为 [hidden]="!condition" 而不是删除 *ngIf="condition" ，这样角度会捕获并启动分页器和排序元素
这不是一个真正的解决方案，而是一个 hack。任何使用它作为解决方案的人都是在冒险并且做错了。

【解决方案3】：

虽然选择的答案有效并解决了问题，但它仍然是一种解决方法。这是处理问题的正确和更优雅的方式。

尝试将AfterViewInit 接口添加到您的类中，然后将this.dataSource.paginator = this.paginator 放入ngAfterViewInit() 方法中

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator
    }

那么您就不必调用解决方法setTimeout。

【讨论】：

这个方法比较合适
这对我不起作用。我的数据源是在 ngAfterViewInit 之后加载的，这可能是问题所在。我尝试先初始化数据源，然后使用 ngAfterViewInit 设置分页器，但它不起作用。我发现唯一有效的是接受答案中的解决方法。
这是我的解决方案。 setTimeout 随机工作。所以我使用了这个解决方案。

【解决方案4】：

Angular 7+ (8/9/10/11/12) 还有另一个优雅的解决方案可以解决这个问题。

短版

设置数据源后立即调用ChangeDetectorRef.detectChanges()。

加长版

第一步：

导入ChangeDetectorRef & Material 相关的东西

import { ..., ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';

第二步：

在你的组件中设置类属性

@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

第三步：

在你的构造函数中注入ChangeDetectorRef

constructor (..., private cdr: ChangeDetectorRef, ...) { ... }

第四步：

设置数据源并调用detectChanges()

this.dataSource = new MatTableDataSource (MY_DATA);
this.cdr.detectChanges();

可选步骤：

之后，您可以设置其他属性，如

this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;

【讨论】：

这非常有效。一个非常烦人的问题的不错的简单解决方案。
当 mat-table 被 ng-if 包围时，在 Angular 9.1.2 中完美运行
在什么生命周期事件中，我应该设置dataSource并调用deleteChanges？

【解决方案5】：

第一种解决方案

将 mat-paginator 从内部 *ngIf div 移到外部

第二个解决方案

在声明 MatPaginator 或 MatSort 时使用 static false

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;

【讨论】：

哇，第二个解决方案解决了我表格的所有问题：分页、排序和过滤。

【解决方案6】：

这是因为 this.paginator 在分配给 this.dataSource.paginator 时是未定义的。

如果您使用静态数据，这将起作用

 @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; // For pagination
 @ViewChild(MatSort, {static: false}) sort: MatSort; // For Sort

 ngOnInit(): void {
   this.dataSource.data = this.dataList; // Data list is data array 
 }

 ngAfterViewInit(): void {
   this.dataSource.paginator = this.paginator; // For pagination
   this.dataSource.sort = this.sort; // For sort
 }

如果您使用动态数据（来自 API 的数据），这将起作用

分页

  @ViewChild(MatPaginator, {static: false})
  set paginator(value: MatPaginator) {
    if (this.dataSource){
      this.dataSource.paginator = value;
    }
  }

用于排序

  @ViewChild(MatSort, {static: false})
  set sort(value: MatSort) {
    if (this.dataSource){
      this.dataSource.sort = value;
    }
  }

作为旁注，我在运动中使用 Angular 9。

【讨论】：

这解决了我不得不使用 setTimeout(0 => this.dataSource.paginator = this.paginator) 的问题。使用角度 8
这对我有用使用 angular 13.1.1

【解决方案7】：

分页器何时在视图中可用并且可以检索并附加到数据源的问题是这个问题的主要症结和常见的陷阱。这里建议的解决方法包括使用setTimeout() 和ngAfterViewInit，就是这样的解决方法——“让我们看看我们需要等待多少时间才能确保@ViewChild 已将我们的组件字段设置为正确的分页符值” .

正确的方法是将@ViewChild 附加到属性设置器，并在使用有效分页器调用该设置器时尽快（并且经常）设置数据源分页器。

拥有一个数据源而不是每次加载都替换它也非常有用（正如我看到很多人所做的那样） - 只需将数据源绑定到 mat-table 并更新它的 data 字段。

 <mat-table [dataSource]="dataSource" matSort>

      <ng-container matColumnDef="col1">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Column1 </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.col1}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="col2">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Column2 </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.col2}} </mat-cell>
      </ng-container>

      <!-- additional columns go here -->

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

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

dataSource: MatTableDataSource<any> = new MatTableDataSource();
displayedColumns = ['col1', 'col2', ... ];

@ViewChild('scheduledOrdersPaginator') set paginator(pager:MatPaginator) {
  if (pager) this.dataSource.paginator = pager;
}

@ViewChild(MatSort) set sort(sorter:MatSort) {
  if (sorter) this.dataSource.sort = sorter;
}

ngOnInit(): void {
    this.loadData().subscribe(somearray => { this.dataSource.data = somearray; });
}

这种方法还应该解决当隐藏在*ngIf 模板后面时分页器延迟渲染的问题（此处的一位评论者指出） - 即使分页器渲染得很晚，它也会被发送到数据源.

【讨论】：

这值得更多的投票！

【解决方案8】：

为了让它工作，我必须在从源获取数据后设置分页器

getVariables() {
    this.activeRoute.params.subscribe(params => {
        if (params['id'] && (params['type'] === Type.CodeList)) {
            this.dataService
                .getItems(this.currentLanguage, params['id'])
                .subscribe((items: any) => {
                    this.dataSource.data = this.items;
                    this.dataSource.paginator = this.paginator;
                })
        }
    })
}

【讨论】：

令人惊讶的是，这解决了我的问题。伟大的工作

【解决方案9】：

我花了好几个小时才弄明白。

密钥是this.dataSource = new MatTableDataSource<MyInterface>(Object.values(data)); 然后设置this.dataSource.paginator = this.paginator;

我使用的是this.dataSource = data，虽然我可以获取数据但分页不起作用。

你必须再次使用new MatTableDataSource

适用于 Angular 11。

【讨论】：

【解决方案10】：

我找到的解决方案是在数据加载成功后设置分页器。

this._empService.GetEmpList().subscribe(
  data => {
    this.empListDataSource = new MatTableDataSource<empToShow>(Object.values(data))
    this.empListDataSource.paginator = this.paginator
  }
)

【讨论】：

非常感谢您的回答。它对我来说非常有效。我正在使用 Angular 10。

【解决方案11】：

在尝试了以上提供的所有解决方案后，最终简单的解决方案对我有用。如果有人卡住，我会发布以供参考。

我正在使用 Angular 8。只需在子引用中添加 { static: false }

  @ViewChild(MatSort, { static: false }) sort: MatSort;
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

Got Solution From Here

我正在使用这个：

@ViewChild(MatSort, { read: true, static: false }) 排序：MatSort;

@ViewChild(MatPaginator, { read: true, static: false }) 分页器：MatPaginator;

【讨论】：

static: false 是默认设置 - 您不需要设置它。

【解决方案12】：

对我有用的是执行 Lonely 建议的关于 ChangeDetectorRef 的建议，并在 @ViewChild 中设置一个静态对象：false，如下所示：

  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

【讨论】：

【解决方案13】：

上述解决方案都不适合我。

我发现了问题所在，主要是 this.paginator 在表格加载并显示之前将是未定义的，这就是为什么在某些地方 setTimeout 解决方案有效。

但在我的情况下，我的表隐藏在一些 ngIf 逻辑之后，因此表仅在 ngIf 变为 true 后加载（这发生在用户交互中），但我在 @987654326 上设置了 this.dataSource.paginator = this.paginator @

因此，解决方案取决于您的情况，基本事实是确保仅在 this.dataSource.paginator = this.paginator 时加载表

我解决了这个问题，当用户进行交互并且ngIf 变成true 之后我调用一个函数来设置分页器

     initPaginator(){
        this.dataSource.paginator = this.paginator
}

【讨论】：

【解决方案14】：

我是角度和打字稿的初学者，但是在遇到同样的问题（除了对我来说排序也不起作用）之后，帮助创建一个函数'refreshDataScource()'并从@调用它987654322@ 以及每次服务器响应新数据之后。在这个函数中，我只是用分页器和排序刷新dataSource。像这样：

refreshDataSource() {
    this.dataSource = new MatTableDataSource(myDataArray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

它修复了分页器和排序。现在一切正常。但是我不确定这只是一种解决方法还是真正的修复。

【讨论】：

【解决方案15】：

使用 setTimeOut() 可以暂时解决问题，但是，如果您将大量数据 [比如 1000 行] 推送到 MatDataSource，这将再次失败。

我们发现，如果在设置数据源分页器之前设置了大型数据集，则 MatTable 加载非常缓慢。

ngOninit(){
// initialize dataSource here
}
    ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;

  /* now it's okay to set large data source... */
  this.dataSource.data = [GetLargeDataSet];}

因此，首先初始化数据源并设置“分页器”或“排序”等属性，然后再将数据推送到“数据”属性中。

【讨论】：

【解决方案16】：

@ViewChild(MatPaginator, {static: false}) paginator: any // For pagination
@ViewChild(MatSort, {static: false}) sort: any; // For Sort

这样使用会解决问题的。

【讨论】：

【解决方案17】：

  <mat-paginator
        #scheduledOrdersPaginator
          (page)="pageEvent($event)">
        </mat-paginator>
         pageEvent(event){
         //it will run everytime you change paginator
           this.dataSource.paginator = this.paginator;
          }

【讨论】：

您需要一些描述性文字来说明为什么这是一个好的解决方案，也许还需要对原始来源进行一些评论。

【解决方案18】：

只改变

dataSource: MatTableDataSource<any>;

为

dataSource = new MatTableDataSource();

dataSource = new MatTableDataSource();
displayedColumns = ['col1', 'col2', ... ];
@ViewChild('scheduledOrdersPaginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit(): void {
    // Load data
    this.dataSource = new MatTableDataSource(somearray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

【讨论】：

【解决方案19】：

只有当您知道加载表格需要多少时间时，使用 setTimeout() 才是可行的解决方案。我的问题是我在桌子上使用了 *ngIf（使用 !isLoading）：

this.dataSource = new MatTableDataSource(this.rawData);

this.initPaginator();

this.isLoading = false;

修复是仅在更改检测和初始化分页器后将我的 isLoading 变量设置为 false：

this.dataSource = new MatTableDataSource(this.rawData);

this.isLoading = false;

this.cdr.detectChanges();

this.initPaginator();

所以它加载数据 -> 显示表格 -> 检测更改 -> 初始化分页器。我希望这对任何人都有帮助！

【讨论】：

我通常不使用 setTimeout，我希望避免使用它，直到我离不开它。在 dataSource 上设置分页器之前执行 cdr.detectChanges() 对我有用。顺便说一下，我有一个使用 OnPush 策略和来自外部的动态设置数据的组件。非常感谢！

【解决方案20】：

要对表格数据进行分页，请在表格后添加<mat-paginator>。

如果您使用 MatTableDataSource 作为表的数据源，只需将 MatPaginator 提供给您的数据源。它会自动监听用户所做的页面更改，并将正确的分页数据发送到表中。

否则，如果您正在实现对数据进行分页的逻辑，您将需要监听分页器的（页面）输出并将正确的数据片段传递给您的表。

有关使用和配置 <mat-paginator> 的更多信息，请查看 mat-paginator 文档。

MatPaginator 是一种为表格数据分页的解决方案，但它不是唯一的选择。事实上，表格可以与任何自定义分页 UI 或策略一起使用，因为 MatTable 及其界面不依赖于任何特定的实现。

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
ngOnInit() {
  this.dataSource.paginator = this.paginator;
}

另请参阅 https://material.angular.io/components/table/overview

【讨论】：

所有解决方案都不起作用，因为应该在表格之后添加。正如您在回答开头提到的那样，它对我有用。谢谢

【解决方案21】：

对于低于 7 的 Angular 版本，请为 MatPaginator 使用 read 参数。

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

这对我有用。

请注意，这适用于动态加载的表格数据。

【讨论】：

【解决方案22】：

  private paginator: MatPaginator;
  private sort: MatSort;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
   this.sort = ms;
   this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
   this.paginator = mp;
   this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
   if(this.dataSource !== undefined){
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
   }
  }

【讨论】：

尝试将这段代码用于动态数据源和使用 ng-if 放置在 ng-container 中的表。无需将 [hidden] 与 div 一起使用。

【解决方案23】：

我遇到了与此类似的问题，mat-paginator 在带有ngIf 的容器内。

唯一对我有用的是评论：

谢谢 - 这就是我的解决方案。我选择使用 [hidden] 而不是 ngIf，这样即使没有任何数据，分页器也会呈现，但不会向用户显示 – TabsNotSpaces

澄清一下，我所做的是在容器外部创建一个div，并带有[hidden]=<negation_of_the_same_condition_as_the_ngIf>。

【讨论】：

【解决方案24】：

我遇到了同样的问题（表格数据显示但 MatPaginator 不工作）。 就我而言，我忘记创建“新 MatTableDataSource”

this.dataSource = somearray;

this.dataSource = new MatTableDataSource(somearray); 启用时不启用 MatPaginator。

从material documentation中提取

“为了简化使用表可以对数据数组进行排序、分页和过滤的用例，Angular Material 库附带了一个 MatTableDataSource，它具有已经实现了根据当前表状态确定应该呈现哪些行的逻辑。”

希望这个答案对某人有所帮助。

【讨论】：

【解决方案25】：

使用 async-await 在 ngOnInit() 中为我工作，分页器和排序必须等待！

   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort; 
    .
    .
    .
   ngOnInit() {
    this.isLoading = true;
    this._statsService.getAllCampgrounds().subscribe(
      async (response) => {
        this.allCampgrounds = response.allCampgrounds;
        this.dataSource = await new MatTableDataSource(this.allCampgrounds);
        
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;

        this.isLoading = false;
      },
      (error) => {
        this.isLoading = false;
        console.log(error);
      }
    );
  }

【讨论】：

【解决方案26】：

在这种情况下，上面发布的答案都没有帮助我。

我的分页没有正确实施的原因是导入

例如

import {MatPaginator} from "@angular/material/paginator";

没用，所以我把这个组件导入改成

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

【讨论】：

【解决方案27】：

我遇到了类似的问题，因为我有两张带有垫子分页器的垫子表，其中只有一个可以工作。我尝试了上述所有选项，然后我意识到我正在更新数据源对象而不是 datasource.data，没有意识到我正在更新类型，感谢@Bigeyes 分享他的答案。

表格加载数据但分页器不工作：

this.datasource = data.filter(x => (x.planName == this.planName && x.Termed_y == 1))

表格加载数据和分页器工作：

this.dataSource2.data = data.filter(x => (x.planName == this.planName && x.Termed_y == 1))

【讨论】：

【解决方案28】：

不使用setTimeout 的解决方案是使用set：


 @ViewChild(MatPaginator) paginator: MatPaginator;


 set matPaginator(mp: MatPaginator) {
      this.paginator = mp;
      this.dataSource.paginator = this.paginator;
  }

【讨论】：

这个解决方案，仅仅通过编写的代码，是行不通的 - 没有调用 matPaginator 属性：Angular 将设置 paginator 属性，因此 dataSource.paginator 将保持未设置。

【解决方案29】：

在我的例子中，来自服务的数据是异步的，所以两者都不能使用 ngOnInit 或 ngAfterViewInit，我使用了 ngOnChanges，如下所示：

ngOnChanges(change: SimpleChanges) {
    if (change.properties) {
      if (this.properties.length > 0) {
        this.dataSource = new MatTableDataSource(this.properties);
        this.dataSource.paginator = this.paginator;
      }
    }
  }

请务必将 html 中 mat-table 元素的 [DataSource] 属性设置为组件的数据源属性，以确保数据源与表格和分页器绑定。

【讨论】：

【解决方案30】：

这花了我 几个小时 才最终找到并理解为什么我的桌子不工作。放置一些 console.logs() 帮助我弄清楚事件的顺序以及为什么它不能始终如一地工作。我的场景类似于上面使用动态数据源的原始问题，但略有不同。对我来说，当我第一次刷新我的 Angular 应用程序时，将设置分页器状态，然后设置我的表的数据。当这些事件按此顺序发生时，分页器会按预期工作。

因为我使用 ReplaySubjects 来获取我的表的数据，所以我的分页器状态将设置在 ngAfterViewInit 中，然后表数据将来自我的订阅（这取决于用户 ID，所以我没有初始值，这就是我没有使用 BehaviorSubjects 的原因）。我的问题是，当我导航到我的应用程序中的另一个组件并返回我的动态表数据源时，表数据将在分页器状态之前设置。这将使分页器显示第 x 页，但显示的数据将始终是第一页数据。

为了解决这个烦人的问题，我：

写了一个简单的函数来设置我的表数据，就像上面提到的那样：

  setTableData() {
    // set table data
    this.tableData.data = this.images.filter(img => this.filterData(img));

    // some other code below
    ....
  }

在我的组件中添加了两个标志，一个用于我是否已加载表格数据，另一个用于是否已设置我的分页状态。这样我可以确保在数据之前设置分页状态。

  // initialize our data source for our table and set flags for state
  tableData = new MatTableDataSource<IImage>(this.images);
  loading = true;
  setPageState = false;

向 ngAfterViewInit 添加了一个 setTimeout，这将设置我的分页器状态并仅在表数据通过 before ngAfterViewInit 被调用时设置我的表数据。 setTimeout 可防止烦人的“检查值后更改表达式”错误。

  ngAfterViewInit() {
    // add pagination state to our table
    setTimeout(() => {
      console.log('Set paginator state');
      this.setPageState = true;
      this.paginator.pageIndex = this.state.pageIndex;

      // check if we are not loading data, meaning the table came in first so
      // we need to set the data here
      if (!this.loading) {
        this.setTableData();
      }
    }, 0);
  }

最后，在我订阅数据的 ngOnInit 中，我不设置我的表数据，除非首先设置分页器状态：

  ngOnInit() {
    console.log('ngOnInit');
    this.tableData.sort = this.sort;
    this.tableData.paginator = this.paginator;

    // listen for data
    this.dbService.images.subscribe(images => {
      console.log('Data subscription');
      // save images
      this.images = images;

      // only set table data if paginator state has been set, otherwise it doesnt work
      if (this.setPageState) {
        this.setTableData();
      }

      // hide spinner and update that we have data
      this.loading = false;
    });

    // other code
    .....
  }

因此，当我第一次登录应用程序以及导航到其他页面并返回我的动态表时，我的分页终于可以正常工作了。

【讨论】：