Angular 过滤数据和分页

我有以下按系筛选教授的代码

<mat-sidenav #sidenav mode="side" [(opened)]="opened">
<div class="depts">
  <app-departments (filterByDeptEvent)="filterProfByDept($event)" [depts]="departments"></app-departments>
</div>

此代码从组件应用程序部门获取部门，然后将其分配给“dept”属性：

filterProfByDept(dept: string) {
    this.dept = dept;
};

此代码支持分页：

   onPageChange($event) {
    this.currentItemsToShow = this.professors.slice($event.pageIndex * $event.pageSize, $event.pageIndex * $event.pageSize + $event.pageSize);
  }

现在，这可以很好地显示教授和分页数据，但是，我想把系里的过滤器与这段代码集成起来，我该怎么做呢

过去，当我不必进行分页时，在*ngFor部分中，我只需创建一个函数，该函数接收系中的教授并过滤教授，然后调用

*ngFor=“let prof of function（department）”

，效果很好

---

我真的很感激任何帮助。很抱歉，这有点长，但我不知道该怎么办。

实际上，我只是用同样的方法修改了按部门过滤的函数：

 processedProf(dept: string) {
    if (this.profName == '') {
      if (dept === "All departments" || !dept) {
        return this.currentItemsToShow;
      }
      return this.currentItemsToShow.filter(prof => prof['department'] === dept);
    } else {
      if (dept !== "All departments" && dept) {
        return this.currentItemsToShow.filter(prof => prof['department'] === dept).filter(prof => prof['fullName'].toLowerCase().includes(this.profName));
      }
      return this.currentItemsToShow.filter(prof => prof['fullName'].toLowerCase().includes(this.profName));
    } 
  }

然后在显示屏上调用

*ngFor=“让prof of processedProf（dept）”

，它就工作了

   onPageChange($event) {
    this.currentItemsToShow = this.professors.slice($event.pageIndex * $event.pageSize, $event.pageIndex * $event.pageSize + $event.pageSize);
  }

 processedProf(dept: string) {
    if (this.profName == '') {
      if (dept === "All departments" || !dept) {
        return this.currentItemsToShow;
      }
      return this.currentItemsToShow.filter(prof => prof['department'] === dept);
    } else {
      if (dept !== "All departments" && dept) {
        return this.currentItemsToShow.filter(prof => prof['department'] === dept).filter(prof => prof['fullName'].toLowerCase().includes(this.profName));
      }
      return this.currentItemsToShow.filter(prof => prof['fullName'].toLowerCase().includes(this.profName));
    } 
  }