Angular 使用自定义数据源在mat表中进行排序、分页和筛选？

我试图用角材质“mat table”对表格进行排序、分页和过滤，从自定义数据源获取数据

我正在使用angular 5.2.5和chrome navigator

这是组件

constructor(
    private jobsService: JobsService,
    public dialog: MatDialog,
    private snackBar: MatSnackBar,
    private aps: ApplicationsService,
    private bindingsService: BindingsService
  ) {
    this.jobs = new Jobs(jobsService);
    this.jobsDataSource = new JobDataSource(this.jobs);
  }

这是我自己的数据源（JobDataSource）

从'@angular/cdk/table'导入{DataSource}；
从“./Jobs”导入{Jobs}；
从“rxjs/Observable”导入{Observable}；
从“./Job.model”导入{Job}；
从“./satelliterensponse.model”导入{satelliterensponse}；
导出类JobDataSource扩展了DataSource{
构造函数（私有作业：作业）{
超级（）；
}
/**由表调用的Connect函数，用于检索包含要呈现的数据的一个流*/
connect（）：可观察{
const displayDataChanges=[
这个.jobs.dataChange，
这是我的工作清单
];
返回可观察的.merge（…displayDataChanges）.map（（数据）=>{
返回数据；
});
}
断开连接（）{}
}

我需要的就是这个例子

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

dataSource=新的MatTableDataSource（元素数据）；

所以。。。我想我需要我的JobDataSource类扩展MatTableDataSource（因为MatTableDataSource是DataSource的子类）。我更改了代码，但它显示了一个错误，即“connect”不是MatTableDataSource的方法

我怎样才能做到呢？如何修改JobDataSource，使其仍能获取具有可观察性的数据，并获取MatTableDataSource属性以进行筛选、排序。。。等等

---

谢谢

您必须首先实现一个服务，从http调用中获取数据，然后从@angular/cdk/collections中实现datasource类-我认为这就是您的困惑所在，请参见-它非常清楚地解释了在这种情况下如何为mat table实现自定义数据源

，您不需要DataSource的实现。这个例子很好用：

有人处理吗？欢迎提供解决方案的链接，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及为什么存在，然后引用您链接到的页面的最相关部分，以防目标页面不可用。谢谢丽莎！在这篇文章中告诉。。。“在我们的例子中，所有的过滤、排序和分页都将在服务器上进行，因此我们将根据第一原理构建我们自己的角度CDK反应式数据源。”这不是may的情况。我想对客户机部分的数据进行排序、过滤和排序

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);