Question

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

我在Chrome导航器中使用的是角5.2.5

这是组件...

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）

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() { }

}

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

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

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

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

谢谢

Answer 1

您必须首先实现从http调用中获取数据的服务，然后再实现@ angular / cdk / collections中的数据源类-我认为这是您的困惑所在，请参阅https://blog.angular-university.io/angular-material-data-table/-它非常说明清楚地如何为mat表实现自定义数据源

Answer 2

在这种情况下，您不需要实现DataSource。该示例可以正常工作：https://material.angular.io/components/table/examples

使用自定义数据源在mat-table中进行排序，分页和过滤？

2 个答案: