Класс расширяет MatTableDataSource и таблицу с фильтрацией

Question

Это мой хобби-проект, и он застрял из-за этой проблемы на некоторое время.Это может быть простой проблемой, но мои знания об Angular и JS довольно ограничены. Тем не менее, мой код приведен ниже (я его немного сократил), и он работает в некоторой степени.Он получает данные с сервера, а затем отображается на клиенте.Никаких проблем там нет, но сейчас, когда я пытаюсь выполнить фильтрацию на стороне клиента, ничего не происходит.В прямом смысле.Я печатаю в поле ввода фильтра и ничего.Строки таблицы не фильтруются.

Мне интересно вот две вещи:

1. Использую ли я правильный подход (могу ли я расширить MatTableDataSource)?
2. Что я делаюнеправильно (если я могу расширить MatTableDataSource)?

MyData.ts

export interface MyData {
    id: number;
    description: string;
}

MyData.service.ts

export class MyService {

    constructor(private http: HttpClient) { }

    getData(): Observable<MyData[]> {
        return this.http.get...
    }
}

MyData.datasource.ts

export class MyDataSource extends MatTableDataSource<MyData> {

    private mySubject = new BehaviorSubject<MyData[]>([]);

    constructor(private myService: MyService) { super(); }

    loadData() {
        this.myService.getData()
        .pipe(catchError(() => of([])))
        .subscribe(data => this.mySubject.next(data));
    }

    connect(): BehaviorSubject<myData[]> {
        return this.mySubject;
    }

    disconnect(): void {
        this.mySubject.complete();
    }
}

MyData.component.ts

export class MyDataComponent implements OnInit {

    displayedColumns= ["id", "description"];
    dataSource: MyDataSource;

    constructor(private myService: MyService) { }

    ngOnInit() {
        this.dataSource = new MyDataSource(this.myService);
        this.dataSource.loadData();
    }

        applyFilter(filterValue: string) {
            this.dataSource.filter = filterValue.trim().toLowerCase();
        }
}

MyData.component.html

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

<mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
        <mat-cell *matCellDef="let data">{{data.id}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="description">
        <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
        <mat-cell *matCellDef="let data">{{data.description}}</mat-cell>
    </ng-container>

</mat-table>

Answer 1

Да, вы можете расширить источник данных, если хотите иметь больший контроль над своими данными, например, настраиваемую сортировку, фильтрацию, разбивку на страницы и потоковую обработку / манипулирование данными в реальном времени.Если нет, вы можете просто использовать класс источника данных по умолчанию, предоставленный на веб-сайте материала

https://material.angular.io/components/table/overview

Как указано выше на сайте материала, вы можете расширить класс источника данных, если хотите сделать большесложные вещи

Advanced data sources
The simplest way to provide data to your table is by passing a data array. More complex use-cases may benefit from a more flexible approach involving an Observable stream or by encapsulating your data source logic into a DataSource class.

Вот более сложный пример того, как вы можете его использовать.

Приведенный ниже код является конструктором источника данных.Который принимает paginator, dataservice и сортировку Mat.

  constructor(public _dataService: DataService,
              public _paginator: MatPaginator,
              public _sort: MatSort) {
    super();
    // Reset to the first page when the user changes the filter.
    this._filterChange.subscribe(() => this._paginator.pageIndex = 0);
  }

Затем вы реализуете класс connect.Этот класс соединения является наблюдаемой, где ваша таблица соответствия будет записываться на эту наблюдаемую и отображать данные в соответствии с тем, что наблюдаемая возвращает

  connect(): Observable<Array<Data>> {
    // Listen for any changes in the base data, sorting, filtering, or 
    //pagination the below object types are all observable/behaviour 
    //subjects
    const displayDataChanges = [
      this._dataService.entryDataChange,
      this._sort.sortChange,
      this._filterChange,
      this._paginator.page
    ]; 
    data: YourCurrentData;
    // Merge all the observable into one stream
    return Observable.merge(...displayDataChanges).map((n) => {
      // If is filter data observer do action
      // If is a sort observer emitting data do action
      // If is new incoming data do action
      // If is a paginator observable emmiting data do action
      // Return filtered, sorted, and paged data that you want to display
      // on your current page. 
    });
  }

В приведенном выше примере используется старая версия rxjs.Но надеюсь, вы понимаете логику этого!