Angular 嵌套子级的ngxs状态更改

我试图更新处于我的状态的嵌套子级，但最终总是出现一个错误：“无法分配给只读属性”。这可能是因为我使用的是不可变状态。但是我怎样才能改变嵌套的子对象呢

代码如下：

@Action(UpdatePortalLogo)
updatePortalLogo(
    ctx: StateContext<PortalStateModel>,
    { logo }: UpdatePortalLogo
) {
    const state = ctx.getState();
    let portal = state.portals.find((portal) => portal.id === state.portalId);
    portal.style.logo = logo; //-> this is the line where it fails

    ctx.setState(
        patch({
            portals: updateItem<Portal>(p => p.id === ctx.getState().portalId,
                portal)
        }));
}

---

我是否需要使用子状态才能工作？

这是因为NGXS在开发模式中使用了

deepFreeze

。您可以通过以下方式进行检查：

console.log（Object.isfreeze（portal））；

导入根模块时，可以通过将

developmentMode

设置为

false

将其关闭：

NgxsModule.forRoot（[]，{developmentMode:false}）

但你不会想这样做，因为“冻结”会阻止你进行不可预测的突变

摧毁是你的武器：

constportal={…state.portals.find（（portal）=>portal.id==state.portalId）}；

另外，

updateItem

操作符可以将函数作为第二个参数，您可以在其中更新对象。因此，代码变得更具声明性：

ctx.setState(
补丁({
门户：updateItem(
portal=>portal.id==state.portalId，
门户=>{
const newPortal={…portal}；
newPortal.style.logo=徽标；
返回新门户；
}
)
})
);

 export interface PortalStateModel {
       portals: Portal[];
       portalId: string;
       loaded: boolean;
       loading: boolean;
    }