角材料分页器未定义 [英] 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上查看我的组件:

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

非常感谢您！

推荐答案

分页器已标有@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屋！