Angular 帶有分頁過濾器和排序的材料表不起作用

Question

我正在開發一個應用程序，在該應用程序中我實現了帶有分頁過濾和排序的材料表。 我已經設法從 api 獲取數據並將其顯示在材料表中，並實現了過濾排序和分頁的邏輯，但不知何故它不起作用

問題：參考各個網站，我在組件ts文件中聲明了： @ViewChild(MatSort) sort: 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>

警報組件.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);
      });
  }

}

請問有什么解決辦法嗎？

Answer 1

嘗試將其添加到您的 ts 文件中：

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

也嘗試更改數據源：

  dataSource: MatTableDataSource<any>;