【问题标题】:angular material pagination and sorting issue角度材料分页和排序问题
【发布时间】:2022-03-11 18:00:35
【问题描述】:

我一直在寻找解决此问题的方法,但遗憾的是无法解决。我按照官方的angular material guide写了如下代码,应该支持材质表的分页和排序:

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

以下错误仍然存​​在:

属性“分页器”没有初始化器,也没有明确分配 在构造函数中。

我尝试根据these 的答案修改代码,但没有任何效果。最多,我摆脱了错误,但分页和排序按钮并没有影响表格项目。

非常感谢您提出解决此问题的建议。

【问题讨论】:

  • 尝试添加@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  • 这有效:@ViewChild(MatPaginator, { static: true }) 分页器!:MatPaginator;

标签: angular angular-material


【解决方案1】:

我假设您正在使用最新版本的 Angular。我这样做了,我得到了这个:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-22
    • 2020-12-17
    • 2019-05-19
    • 2019-05-03
    • 2020-11-25
    • 2015-11-13
    相关资源
    最近更新 更多