Question

我复制了这个案例：Angular 5 Material Table not getting data from service

但是当我尝试从paginator访问任何属性时，我从这个对象中得到了未定义的错误。

有什么想法吗？

由于

Answer 1

我遇到了同样的问题。将mat-paginator标签放在* ngIf之外解决了我的问题。确保它在没有任何条件的情况下可用于组件类。

Answer 2

一些可能导致mat-paginator的问题未定义：

您忘记导入app.module.ts import { MatPaginatorModule } from '@angular/material';，然后在ngModule内的imports数组中声明了导入。

@NgModule（{声明：[某物]，进口：[MatPaginatorModule]}）;
将MatPaginator导入所使用的组件内： import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
将MatDataSource设置为none。（仅当您要从服务器获取异步数据时才需要这样做）

this.dataSource =新的MatTableDataSource（[]）;
确保将mat-paginator的length属性设置为返回的数据行的长度。
在NgAfterViewInit方法内设置分页器，或者如果这样做不起作用，请尝试：

私有分页器：MatPaginator；私人排序：MatSort;

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

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

setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    if (this.paginator && this.sort) {
        this.applyFilter('');
    }
}

Answer 3

在某些情况下，问题与条件外部div有关。例如：

<div *ngIf="condition">
    ...

   <mat-paginator ....>
</div>

对于这种情况，只需将* ngIf =“ condition”替换为[hidden] =“！condition”，即可使用。有关更多详细信息，请参阅https://github.com/angular/components/issues/10205

Answer 4

我遇到了类似的问题，这就是我的工作方式：

我的初始代码设置

component.html

    <div class="chart-wrapper" *ngIf="viewType === 'chart'; else table;">
        // Load Chart Here
    </div>

    <ng-template #table>
        // Load Table Here

        <mat-paginator
            #paginator
            [length]="tableDataSource.data ? tableDataSource.data.length : 0"
            [pageSize]="pageSize"
            [pageSizeOptions]="pageSizeOptions"
            (page)="onPageChange($event)"
        ></mat-paginator>
    </ng-template>

component.ts

columns: string[] = [];
tableDataSource: MatTableDataSource<any[]> = new MatTableDataSource([]);
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
pageIndex = 0;
pageSize = 10;
pageSizeOptions = [10, 15, 20];

ngOnInit() {
    this.getTableData();
}

ngAfterViewInit() {
    this.tableDataSource.paginator = this.paginator;
}

getTableData() {
    // After getting data from API
    this.tableDataSource.data = apiResponse;
}

解决方案

在声明 Mat Paginator 时放入 static: false

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

然后将paginator设置为tableDataSource，待数据加载到其中

this.tableDataSource.data = apiResponse;
this.tableDataSource.paginator = this.paginator;

感谢 cisco336 on this thread

令我惊讶的是，没有人评价该解决方案。

Answer 5

未定义MatPaginator很可能意味着您没有导入模块。有时角垫没有明确告诉你这些你缺少的东西。但在使用组件之前，请务必检查其文档下的API选项卡。在您的模块级别，您应该在app.module.ts文件中包含以下内容。

导入

import { MatButtonModule, MatTableModule, MatPaginatorModule, MatProgressSpinnerModule, MatTableDataSource } from '@angular/material';

导入的组件当然使用了分页器

import { TableComponent } from './table/table.component';

导入数组中导入的那些模块

imports: [
    BrowserAnimationsModule,
    NgbModule.forRoot(),
    FormsModule,
    RouterModule,
    AppRoutingModule,
    CommonModule,
    MatButtonModule,
    MatTableModule,
    BrowserAnimationsModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    HttpClientModule
],

如有必要，可以导出这些模块（不同的主题，所以我不会在这里讨论）。

exports: [
    MatButtonModule,
    MatTableModule,
    MatPaginatorModule
],

这一切都发生在我的App.Module

中

export class AppModule { }

这假设您做机器人将您的项目结构化为功能模块。在这种情况下，您实际上只需要我在组件所在的模块中讨论的所有内容。但在这种情况下，所有内容都在app模块下，这样就可以了。

Answer 6

[length]="dataSource.filteredData.length" over "mat-paginator" 对我有用。

<mat-paginator [pageSize]="10" [pageSizeOptions]="[10,25,50]" #paginator [length]="dataSource.filteredData.length"[showFirstLastButtons]="true"></mat-paginator>

Answer 7

对我来说，从 7 到任何版本的 angular 升级后它都坏了（尽管我只检查了 angular 12）。在 Angular 8 中，他们引入了一个参数，如果我们需要 ngOninit 中的值，我们应该在其中给出 {static: true}。从 Angular 9 开始，如果我们没有明确提到它，它默认设置为 false。

因此更改代码 @ViewChild(MatPaginator) paginator: MatPaginator;

为此 @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

解决了我的问题。

Answer 8

再次检查您的html中是否包含分页器组件

<mat-paginator [pageSizeOptions]="[50, 100, 200]" [length]="resultsLength" showFirstLastButtons></mat-paginator>

Answer 9

“插入* ngIf表示在使用更改检测初始化视图之前，无法查询其内容。这意味着ngOnInit上的sort查询为空。

可以通过将设置从ngOnInit更改为ngAfterViewInit来解决。 https://stackblitz.com/edit/angular-mewfek?file=src/app/app.component.ts“

参考 https://github.com/angular/components/issues/15966

Answer 10

<div class="  fixed-form-bottom" [hidden]="changeState">
  <div class="team-footer">
    <mat-paginator #paginator [pageSize]="pageSize" [showFirstLastButtons]="true" [length]="totalSize"
      [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)" [hidePageSize]="true">
    </mat-paginator>
  </div>
</div>

在.ts文件中，您比较条件并从那里传递true / false

if(this.totalSize>3){
  this.changeState=true;

}

它为我工作

Answer 11

检查是否有count3包裹了mat-paginator或任何顶部组件，如果需要隐藏，则应在组件中使用//state for update when your api call finished const [user_find, set_user_find] = useState(null) //useEffect for call your api useEffect(() => { //componentSkillMount its a variable for not update an unmounted component let componentSkillMount = true; call_api({ url : `/users/search?mobile=${input_mobile_friend.current.value}` }) .then(response => { //if your component skill mounted you can update that componentSkillMount && set_user_find(response.data.data) }) return () => componentSkillMount = false }, []) return ( //if the api call finished you can return a full component user_find && ( <Add_Friend_Selected name={user_find.name} avatar={user_find.avatar} mobile={user_find.mobile} id={user_find._id} list_user_selected={list_user_selected} delete_user_selected={(id) => { delete_user_selected(id) set_count_user_selected(list_user_selected.length + 1) }} /> ) )属性

Answer 12

分页注入延迟的另一个原因是缺少一个或多个结束标记，例如在您的 html 标记中，这似乎会影响分页标记 DOM 注入的时间。

在这种类型的问题场景中，表格的 2nd+ 加载将显示分页组件。

MatPaginator未定义

12 个答案: