javascript 错误类型错误：无法设置未定义的属性"paginator"

up9lanfz 于 2023-01-24 发布在 Java

关注(0)|答案(3)|浏览(120)

我正在创建一个表格，使用表格Angular 材料作为参考，我使用此示例https://material.angular.io/components/table/examples
以下是我目前掌握的情况：
超文本标记语言

<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();
    }
  }
}

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

ERROR TypeError: Cannot set property 'paginator' of undefined

所以排序、过滤和分页都不起作用
我需要帮助：
我在上面的代码中做错了什么？任何帮助都将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/51527623/error-typeerror-cannot-set-property-paginator-of-undefined

3条答案

按热度按时间

rdrgkggo1#

错误提示您试图在this.dataSource仍然是undefined时赋值this.dataSource.paginator。请在初始化之后进行赋值。
另外，当你想使用分页器、排序器或者过滤器时，你必须使用MatTableDataSource类，使用原始数据作为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;
  });
}

赞(0）回复(0）举报 2023-01-24

pcrecxhr2#

您没有做错任何事情。就像下面的代码dataSource: MatTableDataSource<Order> = new MatTableDataSource();一样将新示例分配给ur dataSource，也感谢Kim Kern的解释

export class OrdersComponent implements OnInit {
  displayedColumns: string[] = ['Id', 'Description', 'Status', 'Date', 'Total Price'];
  dataSource: MatTableDataSource<Order> = new MatTableDataSource();
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private orderService:OrderService) {  }

赞(0）回复(0）举报 2023-01-24

sigwle7e3#

export class DisplayapplicationsComponent {

  constructor(private authService: AuthService, private pndService: PndService, private cdref: ChangeDetectorRef) { }
  listOfApplications: any;
  isTableHasData = true;
  private paginator: MatPaginator;
  private sort: MatSort;
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = ['apprefno', 'orgname', 'ackowledgeNo', 'contactpersonName'];

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

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

  setDataSourceAttributes() {    
    this.dataSource = new MatTableDataSource( this.listOfApplications['data']);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;    
    this.cdref.detectChanges();
  }

  ngOnInit(): void {
    this.getApplications();
  }
  getApplications = () => {
    let userId = this.authService.getUserId();
    const regex = new RegExp('[A-Z]{5}[0-9]{4}[A-Z]{1}');
    let inputdata = regex.test(userId) ? { 'panno': userId } : { 'branchCode': this.authService.getBOOffice(), 'applicationstatus': 'P' };
    this.pndService.getApplications(inputdata).subscribe((response: any) => {
      this.listOfApplications = response;
    });
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
    if (this.dataSource.filteredData.length > 0) {
      this.isTableHasData = true;
    } else {
      this.isTableHasData = false;
    }
  }

}

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 错误类型错误：无法设置未定义的属性"paginator"

3条答案

相关问题

热门标签

最新问答