I am trying to populate an Angular Material table with sorting specified on one column using MatSort. The table displays fine, and the sorting works too. However, I get this strange error on the console. The error doesn't break the application but I'm taking it as a sign that something is very wrong. The error says:
TypeError: Cannot define property __source, object is not extensible
I don't understand what this __source property is, and what is the object that is not extensible.
The table in the template is defined as follows:
<mat-table
class="lmat-elevation-z8"
[dataSource]="dataSource"
matSort
matSortActive="deliveryDate"
matSortDisableClear>
<ng-container matColumnDef="select">
<ng-container matColumnDef="receiptNumber">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
[hidden]="!dropdownList[0].isActiveColumn">
RMT Number
</mat-header-cell>
<mat-cell
*matCellDef="let rt"
[hidden]="!dropdownList[0].isActiveColumn">
{{ rt.receiptNumber }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="receiptDate">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
[hidden]="!dropdownList[1].isActiveColumn">
PO Number
</mat-header-cell>
<mat-cell
*matCellDef="let rt"
[hidden]="!dropdownList[1].isActiveColumn">
{{ rt.receiptDate }}
</mat-cell>
</ng-container>
and so on...
And the component looks as follows:
export class ReceiptComponent implements OnInit, AfterViewInit {
@ViewChild(MatSort, { static: true }) sort: MatSort;
dataSource = new MatTableDataSource<any>();
displayedColumns = [
"receiptNumber",
"receiptDate",
"description",
"customerName",
"salesPersonName",
"actions"
];
receiptList: Receipts[] = [];
ngOnInit() {
//Table sorting
this.dataSource.sort = this.sort;
const sortState: Sort = {
active: "receiptDate",
direction: 'desc'
};
this.sort.active = sortState.active;
this.sort.direction = sortState.direction;
}
ngAfterViewInit {
this.dataSource = new MatTableDataSource(this.receiptList);
this.dataSource.sort = this.sort;
}
and so on...
The error I get is as follows:
Attempting to configure '__source' with descriptor '{"value":"MatSortHeader","configurable":true}' on object 'class MatSort extends _MatSortMixinBase {
constructor() {
super(...arguments);
/**
* 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_3__["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_1__["EventEmitter"]();
}
/**
* The sort direction of the currently active MatSortable.
* @return {?}
*/
get direction() { return this._direction; }
/**
* @param {?} direction
* @return {?}
*/
set direction(direction) {
if (Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["isDevMode"])() && direction && direction !== 'asc' && direction !== 'desc') {
throw getSortInvalidDirectionError(direction);
}
this._direction = direction;
}
/**
* Whether to disable the user from clearing the sort by finishing the sort direction cycle.
* May be overriden by the MatSortable's disable clear input.
* @return {?}
*/
get disableClear() { return this._disableClear; }
/**
* @param {?} v
* @return {?}
*/
set disableClear(v) { this._disableClear = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_0__["coerceBooleanProperty"])(v); }
/**
* Register function to be used by the contained MatSortables. Adds the MatSortable to the
* collection of MatSortables.
* @param {?} sortable
* @return {?}
*/
register(sortable) {
if (!sortable.id) {
throw getSortHeaderMissingIdError();
}
if (this.sortables.has(sortable.id)) {
throw getSortDuplicateSortableIdError(sortable.id);
}
this.sortables.set(sortable.id, sortable);
}
/**
* Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
* collection of contained MatSortables.
* @param {?} sortable
* @return {?}
*/
deregister(sortable) {
this.sortables.delete(sortable.id);
}
/**
* Sets the active sort id and determines the new sort direction.
* @param {?} sortable
* @return {?}
*/
sort(sortable) {
if (this.active != sortable.id) {
this.active = sortable.id;
this.direction = sortable.start ? sortable.start : this.start;
}
else {
this.direction = this.getNextSortDirection(sortable);
}
this.sortChange.emit({ active: this.active, direction: this.direction });
}
/**
* Returns the next sort direction of the active sortable, checking for potential overrides.
* @param {?} sortable
* @return {?}
*/
getNextSortDirection(sortable) {
if (!sortable) {
return '';
}
// Get the sort direction cycle with the potential sortable overrides.
/** @type {?} */
const disableClear = sortable.disableClear != null ? sortable.disableClear : this.disableClear;
/** @type {?} */
let sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
// Get and return the next direction in the cycle
/** @type {?} */
let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
if (nextDirectionIndex >= sortDirectionCycle.length) {
nextDirectionIndex = 0;
}
return sortDirectionCycle[nextDirectionIndex];
}
/**
* @return {?}
*/
ngOnInit() {
this._markInitialized();
}
/**
* @return {?}
*/
ngOnChanges() {
this._stateChanges.next();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._stateChanges.complete();
}
}' and got error, giving up: TypeError: Cannot define property __source, object is not extensible
I would really appreciate any pointers. Thank you!