角度材质分页器未定义 [英] Angular Material Paginator is undefined

问题描述

我使用角材质(MatTable、MatPaginator).当我登录到我的应用程序并加载我的组件视图时，我在浏览器调试器中收到以下错误:

I use Angular Material (MatTable, MatPaginator). when i log in to my application and my component view is loaded, i get the following error in my browser debugger:

    ERROR TypeError: "_this._paginator is undefined; can't access its "pageIndex" property"

    ExampleDataSource http://localhost:4200/main.js:1446
    __tryOrUnsub http://localhost:4200/vendor.js:160732
    next http://localhost:4200/vendor.js:160670
    _next http://localhost:4200/vendor.js:160603
    next http://localhost:4200/vendor.js:160578
    _subscribe http://localhost:4200/vendor.js:159751
    _trySubscribe http://localhost:4200/vendor.js:159963
    _trySubscribe http://localhost:4200/vendor.js:160384

我的目标是摆脱这个错误.

my goal is to get rid of this error.

由于可能导致此错误的代码太多，请在我的 Github 上查看我的组件:https://github.com/chrs-k/Behaeltermanagement/tree/master/Behaeltermanagement/client/src/app/table

as there is too much code that could be responsible for this error, please see my component at my Github: https://github.com/chrs-k/Behaeltermanagement/tree/master/Behaeltermanagement/client/src/app/table

问题肯定在table.component.ts

The problem must be located in the table.component.ts

在此先非常感谢您！

推荐答案

Paginator 用@ViewChild 标记，因此在调用 ngAfterViewInit() 之前不会加载.但是，您在 loadData() 中放置了一个构造新 ExampleDataSource 的实例，该实例在 ngOnInit 中调用.但根据 Angular 生活方式挂钩方法的顺序，ngOnInit() 将在 ngAfterViewInit() 之前调用. 在 ngAfterViewInit() 之前，您至少已经调用了两次！所以把 this.loadData() 放到 ngAfterViewInit 中，上面你应该有

Paginator is marked with @ViewChild, and thus will not be loaded until ngAfterViewInit() is called. However, you put an instance of constructing a new ExampleDataSource inside loadData(), which is called in ngOnInit. But according to the order of Angular lifestyle hook methods, ngOnInit() will be called before ngAfterViewInit(). You have called it at least twice already before ngAfterViewInit()! So put this.loadData() into ngAfterViewInit, and up top you should have

dataSource: ExampleDataSource;

删除任何依赖于 this.paginator 的东西，改为在 ngAfterViewInit 中.

Remove anything that depends on this.paginator to instead be in ngAfterViewInit.

这篇关于角度材质分页器未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！