I am working on angular 8.
taskList
which the component gets as an @Input()
.tasklist
array.
This is the effect that for the same @Effect()
DeleteTask$: Observable<Action> = this.actions$.pipe(
ofType(importActions.DELETE_TASK),
switchMap(params =>
this.globalService
.deleteTask(params)
.mergeMap(deleteSuccess => {
return from([
new importActions.DeleteTaskSuccess(deleteSuccess),
new importActions.LoadTaskList(),
]);
})
.catch((error, caught) => {
return Observable.of(new GlobalError(error));
}),
),
);
My problem is that the sorting function works fine when I do on first page load. But if I delete a row and then fetch the tasklist post-delete, I get the following error:
ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property '0' of object '[object Array]'
TypeError: Cannot assign to read only property '0' of object '[object Array]'
The as per the error message the following function in my code gives the error
exchange(a, b) {
const temp = this.taskList[a];
this.taskList[a] = this.taskList[b]; //this line gives error
this.taskList[b] = temp;
}
This function is the part of a sorting code that uses the tasklist
array and sorts it.
The flow being ngOnchanges(detects change is taskList array) calls --> this.taskChange('export_name', 'asc') based on some condition calls --> this. exchange(a, b)
Following is my ngOnchanges method
ngOnChanges(changes: SimpleChanges) {
if (this.taskList !== null && this.taskList !== undefined) {
this.taskChange('export_name', 'asc');
}
}
Following is the main sorting method
async taskChange(value, taskOrder) {
this.sortOrder = taskOrder;
this.selectedValue = value;
const expr = {
asc: (a, b) => a > b,
desc: (a, b) => a < b,
};
for (let i = 0; i < this.taskList.length; i++) {
for (let j = i + 1; j < this.taskList.length; j++) {
switch (value) {
case 'export_name':
if (
expr[this.sortOrder](this.taskList[i].name, this.taskList[j].name)
) {
this.exchange(i, j);
}
break;
case 'file_type':
let type1;
let type2;
type1 = this.exportType.transform(this.taskList[i].code, []);
type2 = this.exportType.transform(this.taskList[j].code, []);
if (expr[this.sortOrder](type1, type2)) {
this.exchange(i, j);
}
break;
}
}
}
}
I am not sure what exactly is causing this error when the array changes the second time. I have tried a bunch of things but none of them worked. From what I found online this might be happening because I'm trying to mutate an array received as @Input. But the above code, which mutates the 'tasklist` array works on initial page load. And only stops working when the array changes. Could someone help me out?
Try creating a copy of the array before trying to sort it. Like using a spread operator.
arrayForSort = [...this.taskList]
Then after sorting you could assign it back to the taskList
field