带有分页过滤器和排序的角材料表不起作用答案

【问题标题】：Angular Material table with pagination filter and sorting not working带有分页过滤器和排序的角材料表不起作用
【发布时间】：2021-08-03 16:39:33
【问题描述】：

我正在开发一个应用程序，在该应用程序中我实现了带有分页过滤和排序的材料表。我已经设法从 api 获取数据并将其显示在材料表中，并实现了过滤排序和分页的逻辑，但不知何故它不起作用

问题：参考各个网站，我在组件ts文件中声明： @ViewChild(MatSort) 排序：MatSort ; @ViewChild(MatPaginator) 分页器：MatPaginator;

它显示错误：没有初始化器并且没有在构造函数中明确分配。

下面是代码文件，便于理解

alarm.component.html

<section class = "headerClass">
  <div class = "container-fluid">
    <div class = "row">
      <div class = "col-sm-12">
        <mat-card>Alarm Summary
          <div class = "md-form mt-0">
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> 
            <!--showing error unresolved variable value-->

          </div>
        </mat-card>
        <table [dataSource] = "dataSource" class = "mat-elevation-z8" mat-table matSort>

          <ng-container matColumnDef = "dateAndTime">
            <th *matHeaderCellDef mat-header-cell> Date And Time</th>
            <td *matCellDef = "let element" mat-cell> {{element.dated}} </td>
          </ng-container>

          <ng-container matColumnDef = "pointName">
            <th *matHeaderCellDef mat-header-cell mat-header-cell mat-sort-header> Point Name</th>
            <td *matCellDef = "let element" mat-cell> {{element.pointName}} </td>
          </ng-container>

          <ng-container matColumnDef = "dataName">
            <th *matHeaderCellDef mat-header-cell mat-header-cell mat-sort-header> Data Name</th>
            <td *matCellDef = "let element" mat-cell> {{element.dataName}} </td>
          </ng-container>

          <ng-container matColumnDef = "status">
            <th *matHeaderCellDef mat-header-cell> Status</th>
            <td *matCellDef = "let element" mat-cell> {{element.status}} </td>
          </ng-container>

          <tr *matHeaderRowDef = "displayedColumns" mat-header-row></tr>
          <tr *matRowDef = "let row; columns: displayedColumns;" mat-row></tr>
        </table>
        <mat-paginator [pageSizeOptions] = "[5, 10, 15]" showFirstLastButtons>
        </mat-paginator>
      </div>
    </div>
  </div>
</section>

alarm.component.ts

export class AlarmComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['dateAndTime', 'pointName', 'dataName', 'status'];
  dataSource: any = [];

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

  constructor(private todoService: TodoService) {
  }

  ngOnInit(): void {
    this.getAlertsHistory();
  }

  ngAfterViewInit(): void {
  }

  getAlertsHistory() {
    this.todoService.getAlarmsHistory().subscribe((response: any) => {
        debugger;
        this.dataSource = response.alertResponses;
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      },
      error => {
        console.log(error);
      });
  }

}

有什么解决办法吗？

【问题讨论】：

标签： angular sorting filter pagination angular-material

【解决方案1】：

尝试将其添加到您的 ts 文件中：

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

也尝试更改数据源：

  dataSource: MatTableDataSource<any>;

【讨论】：