错误TypeError：无法设置undefined的属性'paginator' [英] 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

import { Component, ViewChild, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
  selector: 'app-tv-shows',
  templateUrl: './tv-shows.component.html',
  styleUrls: ['./tv-shows.component.scss']
})
export class TvShowsComponent implements OnInit {
  displayedColumns: string[] = ['name', 'id', 'release', 'description'];
  dataSource: any;
  @ViewChild(DatatableComponent) table: DatatableComponent;
  constructor(private moviesService: MoviesService) {
    this.moviesService.getPopularTVShows().subscribe(res => {
      this.dataSource = res.results;
    });
  }

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

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

当我运行我的应用数据时完美地显示在表中但是我收到以下错误：

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 .paginator 当 this.dataSource 仍然是 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;
  });
}

这篇关于错误TypeError：无法设置undefined的属性'paginator'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！