排序列后从Angular-6-Datatable中检索Sortkey和Sort方向

Question

我在我的项目中使用angular-6数据表。它可以很好地满足我的需求，但是现在我想获得更改时的排序键和排序方向，并在导航到另一个页面（链接）然后返回到包含该表的页面时保留它们。重新加载页面时，我希望表按相同的键和方向排序。角度为6的数据表https://www.npmjs.com/package/angular-6-datatable具有用于sortChange和sortDirectionChange的输出参数，但它们似乎不起作用，或者我做错了。

我在“ account”上有一个默认的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>

当我单击一行时，我想保存排序键和排序方向，并在返回并重新加载数据时将其恢复到表中。

谢谢！