Angular 8 matsort - TypeError: Невозможно определить свойство __source, объект не является расширяемым

Question

Я использовал angular 8 и дизайн материала в моем проекте. Данные отображаются в таблице, фильтрация и разбиение на страницы работают одинаково, но сортировка не работает должным образом. Что я должен сделать, чтобы это работало. Это не выдает ошибку, но в консоли отображалось следующее содержимое:

Консоль выдает

Attempting to configure '__source' with descriptor '{"value":"MatSortHeader","configurable":true}' on object 'function MatSort() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        /**
         * Collection of all registered sortables that this directive manages.
         */
        _this.sortables = new Map();
        /**
         * Used to notify any child components listening to state changes.
         */
        _this._stateChanges = new rxjs__WEBPACK_IMPORTED_MODULE_4__["Subject"]();
        /**
         * The direction to set when an MatSortable is initially sorted.
         * May be overriden by the MatSortable's sort start.
         */
        _this.start = 'asc';
        _this._direction = '';
        /**
         * Event emitted when the user changes either the active sort or sort direction.
         */
        _this.sortChange = new _angular_core__WEBPACK_IMPORTED_MODULE_2__["EventEmitter"]();
        return _this;
    }' and got error, giving up: TypeError: Cannot define property __source, object is not extensible

Ts файл:

// Angular
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild } from '@angular/core';
// CRUD
import { LayoutUtilsService, MessageType, QueryParamsModel } from '../../../../../core/_base/crud';
// Services and Models
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';

import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { RedeemService } from '../../../../../core/e-commerce/_services/redeem.service';

@Component({
  selector: 'kt-sellrequest-list',
  templateUrl: './sellrequest-list.component.html',
  styleUrls: ['./sellrequest-list.component.scss']
})
export class SellrequestListComponent {

  listing = [];
  displayedColumns = [];
  dataSource : any = [];
  result : any = [];

  resourcesLoaded = true

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  /**
     * Component constructor
     *
     * @param redeemService: RedeemService
   * @param cdr
   * @param router
   * @param layoutUtilsService: LayoutUtilsService
   * @param toastr: ToastrService,
     */
    constructor(
    private redeemService: RedeemService,
    private cdr: ChangeDetectorRef,
    private router: Router,
    private layoutUtilsService: LayoutUtilsService,
    private toastr: ToastrService,
    ) {
  }

  ngOnInit() {
    this.getListing();
  }
  getListing() {
    this.resourcesLoaded = false;
    this.result = this.redeemService.getSellReqList().subscribe(
      (data) => {
        this.listing = data.data;
        this.displayedColumns = ['Date', 'Mobile', 'Name','Qty','Commodity', 'Amount', 'Amt Tranfer', 'Acc No', 'IFSC', 'Bank', 'Bnf Name', 'Approve', 'Cancel'];
        this.dataSource = new MatTableDataSource(this.listing);
        this.cdr.markForCheck();
        this.resourcesLoaded = true;
      },
      error => {
        console.error("error!",error)
      }
    );
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}

HTML

<kt-portlet>

    <kt-portlet-body>
        <div class="spinner-wrapper" *ngIf="resourcesLoaded === false">
            <span>please wait</span> 
            <mat-spinner class="matSpinner" diameter="25" value="100" ></mat-spinner>
        </div>
        <div class="kt-form kt-margin-b-30">
            <div class="example-header">
                <mat-form-field>
                  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
                </mat-form-field>
            </div>
            <div class="mat-table__wrapper example-container mat-elevation-z8">
                <mat-table class="example-table" #table [dataSource]="dataSource" #sort="matSort" matSort>

                    <ng-container matColumnDef="Date">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.purchase_date  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Mobile">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.cus_mobile  }} </mat-cell>
                    </ng-container>

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

                    <ng-container matColumnDef="Qty">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Qty </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.qty  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Commodity">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Commodity </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.com_name  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Amount">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Amount </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.credm_amount  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Amt Tranfer">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Amt Tranfer </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.transfer_type  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Acc No">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Acc No </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.account_no  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="IFSC">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> IFSC </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.ifsc  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Bank">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Bank </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.bank_name  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Bnf Name">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Bnf Name </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{ element.bnf_name  }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Approve">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Approve</mat-header-cell>
                        <mat-cell *matCellDef="let element">
                            <button mat-raised-button color="primary" matTooltip="Approve Request">
                                Approve
                            </button>
                        </mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="Cancel">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Cancel</mat-header-cell>
                        <mat-cell *matCellDef="let element">
                            <button mat-raised-button color="warn"   matTooltip="Cancel Request">
                                Cancel
                            </button>
                        </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 [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
            </div>
        </div>
    </kt-portlet-body>
</kt-portlet>

Как реализовать сортировку с использованием дизайна материала?