Угловая таблица материалов, нумерация страниц, сортировка и пожарная база

Question

Я очень старался, чтобы эта таблица работала с нумерацией страниц и сортировкой вместе с огненной базой.Я смог заставить таблицу работать с firebase, но как только я попытался ввести сортировку и нумерацию страниц, все стало мутным.Я прочитал документацию и увидел схемы, поэтому сгенерировал схемы таблицы материалов и попытался их адаптировать, но это просто оставило меня здесь.Не знаю, почему это кажется более сложной задачей, чем должно быть.Я занимаюсь этим уже пару дней, что мне здесь не хватает?

Вот мой Data-table-datasource.ts

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import { DataviewdataService } from 'src/app/dataviewdata.service';
import { Inject, Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { FirebaseApp } from '@angular/fire'

// TODO: Replace this with your own data model type
export interface DataTableItem {
  name: string;
  id: number;
  time: string;
}

@Injectable()
export class DataviewdataService {

  private alertData$: AngularFireList<any[]>;

  constructor(
    public db: AngularFireDatabase, 
    private alert: DataviewdataService,




    @Inject(FirebaseApp) fb) {
      this.alertData$ = db.list('alerts');
    }



export class DataTableDataSource extends DataSource<DataTableItem> {
  data: DataTableItem[] = this.alert = db.list('alerts').valueChanges();


  constructor(private paginator: MatPaginator, private sort: MatSort) {
    super();
  }


  connect(): Observable<DataTableItem[]> {

    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];


    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));
  }


  disconnect() {}


  private getPagedData(data: DataTableItem[]) {
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
    return data.splice(startIndex, this.paginator.pageSize);
  }


  private getSortedData(data: DataTableItem[]) {
    if (!this.sort.active || this.sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort.direction === 'asc';
      switch (this.sort.active) {
        case 'name': return compare(a.name, b.name, isAsc);
        case 'id': return compare(+a.id, +b.id, isAsc);
        default: return 0;
      }
    });
  }
}


function compare(a, b, isAsc) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Мой dataviewdata.service для получения данныхиз firebase:

import { Injectable } from '@angular/core';

import { AngularFireDatabase } from '@angular/fire/database';



@Injectable({
  providedIn: 'root'
})
export class DataviewdataService {

  constructor(private db: AngularFireDatabase) { }

  getAlerts(){
    return this.db.list('alerts').valueChanges();
  }
}

Мои данные-table.component.ts:

import { Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import { MatPaginator, MatSort } from '@angular/material';
import { DataTableDataSource } from './data-table-datasource';
import * as XLSX from 'xlsx';

@Component({
  selector: 'data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild('TABLE') table: ElementRef;
  dataSource: DataTableDataSource;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['id', 'name', 'time'];

  ExportTOExcel()
  {
    const ws: XLSX.WorkSheet=XLSX.utils.table_to_sheet(this.table.nativeElement);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    /* save to file */
    XLSX.writeFile(wb, 'CHNCHR_Data_Sheet.xlsx');

  } 

  ngOnInit() {
    this.dataSource = new DataTableDataSource(this.paginator, this.sort);
  }
}

А в случае, если нужен component.html:

<div class="mat-elevation-z8" #TABLE>
  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">

    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.id}}</mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
        <mat-cell *matCellDef="let row">{{row.time}}</mat-cell>
      </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
    [length]="dataSource.data.length"
    [pageIndex]="0"
    [pageSize]="50"
    [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>
</div>