关于angular：在垫表中使用自定义数据源进行排序，分页和过滤器？

Sorting, pagination and filter in mat-table with custom datasource?

我正在尝试使用Angular Material" mat-table"对表进行排序，分页和过滤，以从自定义数据源获取其数据。

我在Chrome导航器中使用了5.2.5

这是组件...

1
2
3
4
5
6
7
8
9
10

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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { DataSource } from '@angular/cdk/table';
import { Jobs } from './jobs';
import { Observable } from 'rxjs/Observable';
import { Job } from './job.model';
import { SatelliteResponse } from './satelliteresponse.model';

export class JobDataSource extends DataSource<SatelliteResponse> {

constructor(private jobs: Jobs) {
super();
}

/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<SatelliteResponse[]> {
const displayDataChanges = [
this.jobs.dataChange,
this.jobs.jobList
];

return Observable.merge(...displayDataChanges).map((data) => {
return data;
});
}

disconnect() { }

}

我需要的东西就像例子...

1	dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

所以...我想我需要JobDataSource类扩展MatTableDataSource(因为MatTableDataSource是DataSource的子级)。我更改了代码，但是它显示了一个错误，提示" connect"不是MatTableDataSource的方法。

我该如何实现？如何修改JobDataSource使其仍可观察到数据，并获取MatTableDataSource属性以进行过滤，排序等。

谢谢