Сортировка, разбиение на страницы и фильтрация в mat-таблице с пользовательским источником данных?

Question

Я пытаюсь отсортировать, разбить на страницы и отфильтровать таблицу с помощью "mat-table" Angular Material, получая данные из пользовательского источника данных.

Я использую Angular 5.2.5 с навигатором Chrome

Это компонент ...

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 / collection - я думаю, что именно в этом ваша путаница, см. https://blog.angular -университет.io / angular-material-data-table / - очень четко объясняется, как реализовать пользовательский источник данных для таблицы mat