Как фильтровать данные с помощью mattableDataSource?

Question

У меня есть некоторые данные, и у меня есть некоторые типы. И для каждого типа у вас разные данные.

ТАК мой шаблон выглядит так:

 <mat-tab-group
      (selectedTabChange)="onTabChange($event)"
      [selectedIndex]="selectedTab"
      (selectedIndexChange)="setTabState($event)"
    >
      <mat-tab [label]="tab.name" *ngFor= "let tab of tabs" >
        <div class="mat-elevation-z8 table-container">
          <table *ngIf = "tab.dataSource && tab.dataSource.data"  mat-table [dataSource]="tab.dataSource" matSort aria-label="Elements">

            <ng-container matColumnDef="title">
              <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Title</th>
              <td mat-cell *matCellDef="let row">{{ row.title }}</td>
            </ng-container>


            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row [routerLink]="['..', row.id]" *matRowDef="let row; columns: displayedColumns"></tr>
          </table>

        </div>


           <ng-template mat-tab-label #itemList let-itemType="itemType">
            <mat-icon class="interviews">speaker_notes</mat-icon>
            <span i18n>Interview reportssss</span>{{ dossierItemsCountString(itemTypes.Interview) }}
            <a [routerLink]="['../', dossier.id, 'item', 'new', itemTypes.Interview]"
              ><mat-icon class="add_box">add</mat-icon>
            </a>
          </ng-template>


      </mat-tab>


    </mat-tab-group>

<ng-template #itemList let-itemType="itemType">
</ng-template>

<div>
  <a routerLink=".." mat-button i18n>Back</a>
</div>
<ng-template #itemView let-item="item"> </ng-template>

, а мой файл ts выглядит так:

export class ViewComponent implements OnInit, AfterViewInit {
datasource: MatTableDataSource<DossierDto>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


  activeTab;
  tabs = [
    { name: 'Tab 1', dataSource: new MatTableDataSource<DossierDto>([]) },
  ];

  constructor(
    private dossierService: DossierService,
    private uiStateService: UIStateService,
    route: ActivatedRoute,
    private errorProcessor: ErrorProcessor
  ) {

    this.dossier = route.snapshot.data.dossier;
    this.dossierItems = route.snapshot.data.dossierItems;
    this.searchDossieritems(null);
    this.editDossierForm = this.formBuilder.group({
      name: this.formBuilder.control(this.dossier.name, [Validators.required])
    });
    this.editDossierForm.disable();
  }

  public readonly displayedColumns = [
    'title',

  ];

  @ViewChildren(MatSort) matSorts: QueryList<MatSort>;

}

ngOnInit(): void {

    /* this.datasource.filterPredicate = (data: DossierDto, filter: string  ) => {
      return data.name === filter;
    } */
   /*  this.activeTab = this.tabs[0];
    this.loadData().subscribe((data) => {
      this.activeTab.dataSource = new MatTableDataSource(data);
      this.activeTab.dataSource.sort = this.matSorts.toArray()[0];
    }); */

    const state = this.uiStateService.getState();
    if (state) {
      this.selectedTab = state.tabState || 0; // If there is no state
    }
    this.setTabState(state.tabState);
  }

loadData(): Observable<DossierDto[]> {
    // To simulate async request
    return of(this.dossierItems).pipe(delay(100));
  }

 dossierItemsBy(itemType: DossierItemTypeDto) {
    return this.dossierItems.filter(
      i => i.itemType === itemType && (!this.hasSearchQuery || this.itemSearchMatches[i.id].hasMatch)
    );
  }

  dossierItemsCountBy(itemType: DossierItemTypeDto) {
    return this.typeSearchMatches[itemType.toString()] || { total: 0, matches: 0 };
  }

  dossierItemsCountString(itemType: DossierItemTypeDto) {

    const count = this.dossierItemsCountBy(itemType);
    //debugger;
    if (this.hasSearchQuery) {
      return `(${count.matches}/${count.total})`;
    } else {
      return `(${count.total})`;
    }
  }
}

Но Проблема в том, что данные не загружаются.

и если я сделаю это в ngOninit: тогда будут загружены все данные, а не только элементы для этого случая: Интервью

 this.loadData().subscribe((data) => {
      this.activeTab.dataSource = new MatTableDataSource(data);
      this.activeTab.dataSource.sort = this.matSorts.toArray()[0];

Итак, это результат:

But I want only see in this case 16 - because of itemType = interview.