angular-6-datatable активная страница

Question

Здравствуйте, сообщество angular,

У меня проблема с пакетом "angular-6-datatable", все отлично работает, кроме активной страницы.

Это мой код компонента:

import {AfterViewInit, Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {BrService} from '../../services/br.service';
import {AuthService} from '../../services/auth.service';
import {ActivatedRoute, Router} from '@angular/router';
import {ToastaConfig, ToastaService, ToastOptions} from 'ngx-toasta';
import {DataTable} from 'angular-6-datatable';


@Component({
  selector: 'app-br-table',
  templateUrl: './br-table.component.html',
  styleUrls: ['./br-table.component.scss']
})
export class BrTableComponent implements OnInit, OnDestroy, AfterViewInit {

  static searchBy = 'name';
  static searchInput: string;
  static activePage = 2;
  static rowsOnPage = 5;

  brs: any[];
  brSubscription: Subscription;
  activePage = 10;
  rowsOnPage = 5;
  mfDataTable;

  constructor(private brService: BrService,
              private authService: AuthService,
              private toastaService: ToastaService,
              private toastaConfig: ToastaConfig,
              private router: Router,
              private route: ActivatedRoute) {
    // Assign the selected theme name to the `theme` property of the instance of ToastaConfig.
    // Possible values: default, bootstrap, material
    this.toastaConfig.theme = 'bootstrap';
  }


  ngAfterViewInit(): void {
    const msg: string = this.route.snapshot.queryParamMap.get('msg');
    const type: string = this.route.snapshot.queryParamMap.get('type');
    if (msg != null) {
      this.addToast(msg, type);
    }
  }

  ngOnInit() {
    this.subscribeOnBrs();
    this.filterBrs();
  }

  subscribeOnBrs() {
    this.brSubscription = this.brService.brsSubject.subscribe(
      (brs: any[]) => {
        this.brs = brs;
        this.rowsOnPage = BrTableComponent.rowsOnPage;
        this.activePage = BrTableComponent.activePage;
        console.log('mf:');
        console.log(this.mfDataTable);
      }
    );
    this.brService.emitBrSubject();
  }

  onPaginatorClick(mf: HTMLTableElement) {
    console.log('onPaginatorClick...');
    console.log(mf);
    this.mfDataTable = mf;
    BrTableComponent.activePage = mf.activePage;
    BrTableComponent.rowsOnPage = mf.rowsOnPage
  }
 }

<table class="table table-striped table-hover table-sm table-responsive-md"
       [mfData]="brs" #mf="mfDataTable"
       [mfRowsOnPage]="rowsOnPage"
       [mfActivePage]="activePage"
>
  <thead>
  <tr>
    <th scope="col">
      <mfDefaultSorter by="name">Nom</mfDefaultSorter>
    </th>
    <th scope="col">
      <mfDefaultSorter by="version">Version</mfDefaultSorter>
    </th>
    <th scope="col">
      <mfDefaultSorter by="Type">Type</mfDefaultSorter>
    </th>
    <th scope="col">
      <mfDefaultSorter by="status">Statut</mfDefaultSorter>
    </th>
    <th scope="col">
      <mfDefaultSorter by="author">Auteur</mfDefaultSorter>
    </th>
    <th scope="col">
      <mfDefaultSorter by="jira">Jira</mfDefaultSorter>
    </th>
  </tr>
  </thead>
  <tbody>
  <tr class="tr-hover" *ngFor="let item of mf.data" (click)="onClickRow(item.pk)">
    <th scope="row">{{item.name}}</th>
    <td>{{item.version}}</td>
    <td>{{item.Type}}</td>
    <td>{{item.status | uppercase}}</td>
    <td>{{item.author | uppercase}}</td>
    <td>{{item.jira}}</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td colspan="6">
      <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]" (click)="onPaginatorClick(mf)"></mfBootstrapPaginator>
    </td>
  </tr>
  </tfoot>
</table>

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

Я прочитал официальную документацию: https://www.npmjs.com/package/angular-6-datatable и не вижу, что я делаю неправильно.

Пожалуйста, помогите мне