TypeError：“属性”是只读的[关闭]答案

【问题标题】：TypeError: "property" is read-only [closed]TypeError：“属性”是只读的[关闭]
【发布时间】：2021-11-19 10:53:21
【问题描述】：

我将 angular 从 8 更新到 12，在项目的许多地方，控制台中出现错误：TypeError: "property_name" is read-only。

这是一个有错误的对象的例子：

export interface ObjectName {
    index: number;
    name: string;
    widgets: ArrayType[];
}

这是发生错误的代码：

ngOnChanges(): void {
        this.Areas = this.areas
        .map(area => {
            area.index = 10; // ERROR "index" is read-only
            switch (area.name) {
                case '1': area.index = 0; break;
                case '2': area.index = 1; break;
                case '3': area.index = 2; break;
            }

            return area;
        })
        .sort((a, b) => (a.index - b.index));
    }

而且现在项目中有很多这样的地方，我不明白如何修复它。我尝试将接口更改为一个类，但一切都是一样的。这是我的 tsconfig.json，但我阅读了它的各种设置，似乎没有什么可以帮助我。

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "downlevelIteration": true,
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2020",
        "emitDecoratorMetadata": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es5",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2018", "dom"]
    }
}

error screenshot

【问题讨论】：

标签： javascript angular typescript runtime-error typeerror

【解决方案1】：

您将需要返回一个新对象（重新分配）。这样的事情会起作用：

.map(area => {
    let index = 10;
    switch (area.name) {
        case 'header_area': index = 0; break;
        case 'content_area': index = 1; break;
        case 'footer_area': index = 2; break;
    }

    return {...area, index};
})

扩展运算符... 会将area 的内容分配给一个新对象，并用一个新值覆盖index。额外：index: index 是多余的，但如果局部变量有不同的名称，你需要做例如index: newIndex.

【讨论】：

以 OP 使用 map 的方式授予使用 map 没有任何意义，但为什么他们必须复制对象？那是 Angular 的东西吗？
（旁注：... 不是运算符，运算符不能做 rest 和 spread 所做的事情。... 是主要语法。:-)）
@T.J.Crowder 这不是 Angular 的东西，它是基本的 javascript 东西
@KumailHussain - 你没有正确阅读我上面的评论。
@T.J.Crowder 考虑到对 OPs 问题的编辑（“解决方案”），是的，他尝试迭代的数组可能被冻结。 NGRX 是一个受 redux 启发的用于状态管理的角度框架，通常状态总是会通过替换它来改变（这意味着只发生在每个状态部分的特定“reducer”上）。