Получение Sortkey и Sort direction из Angular-6-Datatable после сортировки столбца

Question

Я использую angular-6-datatable в моем проекте.Это хорошо работает для того, что мне нужно, но теперь я хотел получить ключ сортировки и направление сортировки при изменении и сохранить их при переходе на другую страницу (ссылку), а затем вернуться на страницу с таблицей.Я хочу, чтобы таблица перебиралась по тому же ключу и направлению, когда я перезагружаю страницу.У angular-6-datatable https://www.npmjs.com/package/angular-6-datatable есть выходные параметры для sortChange и sortDirectionChange, но они не работают или я что-то не так делаю.

У меня есть стандартная sortKey для «account», поэтомуТаблица загрузок отсортирована по счету в порядке возрастания.Если кто-то щелкнет, чтобы отсортировать таблицу по другому столбцу в порядке убывания, а затем щелкнет строку, чтобы просмотреть полную запись, по возвращении к компоненту с таблицей я хотел бы восстановить исходную сортировку и направление.

Я пытался использовать [mfSortByChange]="sortByChange", но получаю следующую ошибку:

Невозможно выполнить привязку к 'mfSortByChange'

..., поскольку это неизвестное свойство 'table'.

Вот таблица:

<table class="table table-bordered table-condensed" [mfData]="filteredList" #mf="mfDataTable" [mfRowsOnPage]="25"
            [mfSortBy]="sortKey" >
            <thead>
                <th>
                    <mfDefaultSorter by="Account">Account</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="ByLastName">Borrower<br>Name</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="Priority">Loan<br>Priority</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="LoanProgram">Loan<br>Program</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="PrinBal">Principal<br>Balance</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="PmtPI">Payment<br>Amount</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="NextDueDate">Next<br> Due Date</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="LastPaidDate">Last<br> Paid Date</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="MaturityDate">Maturity<br> Date</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="DaysLate">Days<br>Late</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="PropStreet">Street</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="PropCity">City</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="PropState">State</mfDefaultSorter>
                </th>

                <th>
                    <mfDefaultSorter by="PhoneHome">Home<br>Phone</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="PhoneCell">Cell<br>Phone</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="NextRevision">Follow<br> Up</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="LoanOfficer">CSR</mfDefaultSorter>
                </th>
            </thead>
            <tbody>
                <ng-container *ngIf="loans">
                        <tr *ngFor="let x of mf.data" class="bg-info pointerCursor" (click)="RowSelected(x);" 
                        [ngClass]="{
                            'current-date': dateDifference(x.NextRevision, today) == 0,
                            'pastDue-date': dateDifference(x.NextRevision, today) < 0,
                            'tomorrow-date': dateDifference(x.NextRevision, today) == 1
                            }">
                         <td>{{x.Account}}</td>
                         <td>{{x.FullName}}</td>
                         <td>{{x.Priority}}</td>
                         <td>{{x.LoanProgram}}</td>
                         <td>{{x.PrinBal | currency}}</td>
                         <td>{{x.PmtPI | currency}}</td>
                         <td>{{x.NextDueDate | date:'MM/dd/yy'}}</td>
                         <td>{{x.LastPaidDate | date:'MM/dd/yy'}}</td>

                         <td>{{x.MaturityDate | date:'MM/dd/yy'}}</td>
                         <td>{{x.DaysLate}}</td>
                         <td>{{x.PropStreet}}</td>
                         <td>{{x.PropCity}}</td>
                         <td>{{x.PropState}}</td>

                         <td>{{x.PhoneHome}}</td>

                         <td>{{x.PhoneCell}}</td>
                         <td>{{x.NextRevision | date:'MM/dd/yy'}}</td>
                         <td>{{x.LoanOfficer}}</td>
                     </tr>
                </ng-container>

                <tr *ngIf="!loans">
                    <td colspan="18">
                        {{statusMessage}}
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>`enter code here`
                    <td colspan="18">
                        <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25,50]"></mfBootstrapPaginator>
                    </td>
                </tr>
            </tfoot>
        </table>

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

Заранее спасибо!