angular 物料分頁和排序問題

Question

我一直在尋找解決此問題的方法，但不幸的是無法使其工作。 我按照官方的angular素材指南編寫了如下代碼，應該支持素材表的分頁和排序：

export class RecentAnnouncementsComponent implements OnInit, AfterViewInit {

  displayedColumns: string[] = ['created_utc', 'name', 'title'];
  dataSource = new MatTableDataSource<any>();
  items: ItemData[] = [];

  constructor(private firebaseService: FirebaseService) { }

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

  ngOnInit(): void {
    
  }

  ngAfterViewInit() {
    this.firebaseService.getItems().subscribe(result => {
      this.items = result;
      this.dataSource.data = this.items;
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    });
  }
}

以下錯誤仍然存在：

屬性“分頁器”沒有初始值設定項，也沒有在構造函數中明確分配。

我試圖根據這些答案修改代碼，但沒有任何效果。 最多，我擺脫了錯誤，但分頁和排序按鈕並沒有影響表格項目。

我將非常感謝您提出解決此問題的建議。

Answer 1

我假設您正在使用最新版本的 Angular。 我這樣做了，我得到了這個工作：

  @ViewChild(MatSort) sort: MatSort = new MatSort();
  @ViewChild(MatPaginator) paginator: MatPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);

Answer 2

我這樣做是為了解決：

@ViewChild(MatSort) sort: MatSort = <MatSort>{};
@ViewChild(MatPaginator) paginator: MatPaginator = <MatPaginator>{};

這種方式也有效：

@ViewChild(MatSort) sort: MatSort | null = null;
@ViewChild(MatPaginator) paginator: MatPaginator | null = null;