TypeError: 在 TypeScript 中,无法将值分配给只读属性 '0',该属性属于对象 '[object Array]'。

14 浏览
0 Comments

TypeError: 在 TypeScript 中,无法将值分配给只读属性 '0',该属性属于对象 '[object Array]'。

我正在使用Angular 8开发。

  1. 我有一个页面显示一个表格。表格显示来自组件的@Input()的对象数组taskList的数据。
  2. 我在表格的列上有一个排序函数。
  3. 每一行上都有一个删除选项。当我点击删除选项时,它会调用API删除该行,然后再调用以获取tasklist数组。这是对相同效果的描述。

  @Effect()
  DeleteTask$: Observable = 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));
        }),
    ),
  );

我的问题是,当我第一次加载页面时,排序函数运行正常。但是,如果我删除一行,然后在删除后获取tasklist,我会收到以下错误:

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]'

根据错误消息,我的代码中的以下函数会出错:

  exchange(a, b) {
    const temp = this.taskList[a];
    this.taskList[a] = this.taskList[b]; //此行报错
    this.taskList[b] = temp;
  }

这个函数是一个使用tasklist数组进行排序的代码的一部分。

流程是ngOnchanges(检测到taskList数组的变化)调用 --> this.taskChange('export_name', 'asc') 根据某些条件调用 --> this.exchange(a, b)

以下是我的ngOnchanges方法:

ngOnChanges(changes: SimpleChanges) {
    if (this.taskList !== null && this.taskList !== undefined) {
      this.taskChange('export_name', 'asc');
    }
  }

以下是主要的排序方法:

  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;
        }
      }
    }
  }

我不确定第二次更改数组时究竟是什么导致了这个错误。我尝试了很多方法,但都没有成功。根据我在网上找到的信息,这可能是因为我试图改变作为@Input接收到的数组。但是上述代码,在初始页面加载时可以改变'tasklist'数组,并且只有在数组更改时才停止工作。有人可以帮助我吗?

0