Не удается назначить только для чтения свойство «активный» объекта » [объект объекта]»

#javascript #angular #typescript

Вопрос:

У меня есть интерфейс ниже

 export interface ProductCommand extends ProductDetailsCommand { }
 

Интерфейс ProductDetailsCommand

 export interface ProductDetailsCommand {
    id: string;
    active: boolean;
    archive: boolean;
    title: string;
    description: string;
    category: CategoryVendorCommand;
    subCategory: CategoryVendorCommand;
    tags: string[];
    vendor: CategoryVendorCommand;
}
 

В компоненте

 private productCommand: ProductCommand = {} as ProductCommand;
 

Я пытаюсь присвоить значение активному свойству

 onMenuClick(menuItem: number, id: string): void {
    switch (menuItem) {
      case 1:
        this.productCommand.active = true;
        this.productCommand.archive = null;
        this.store.dispatch(UPDATE_PRODUCT({ id: id, product: this.productCommand }));
        break;
      case 2:
        this.productCommand.active = false;
        this.productCommand.archive = null;
        this.store.dispatch(UPDATE_PRODUCT({ id: id, product: this.productCommand }));
        break;
      case 3:
        this.productCommand.active = null;
        this.productCommand.archive = true;
        this.store.dispatch(UPDATE_PRODUCT({ id: id, product: this.productCommand }));
        break;
    }
  }
}
 

Исключение при втором присвоении значения, при первом присвоении я не получу это исключение, однако при втором я получил это исключение

 ERROR TypeError: Cannot assign to read only property 'active' of object '[object Object]'
    at ProductDashboardTableComponent.onMenuClick (product-dashboard-table.component.ts:77)
    at ProductDashboardTableComponent_td_27_Template_button_click_16_listener (product-dashboard-table.component.html:82)
    at executeListenerWithErrorHandling (core.js:15272)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15316)
    at HTMLButtonElement.<anonymous> (platform-browser.js:560)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28645)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at ZoneTask.invokeTask [as invoke] (zone.js:487)
 

console.log(this.productCommand) в обработчике щелчка:

введите описание изображения здесь

Комментарии:

1. Можете ли вы console.log(this.productCommand) в своем обработчике кликов? Чтобы проверить, действительно ли это тот объект, который вы ожидаете увидеть?

2. @Cerbrus включил журнал

3. В нем говорится, что свойство доступно только для чтения. Таким образом, он либо недоступен для записи , либо объект заморожен

Ответ №1:

Попробуйте установить значение с помощью оператора спреда:

 ...
this.productCommand = {...this.productCommand, active: true};
...
 

Ответ №2:

Команда продукта, если вы получаете это значение из магазина. Вам нужно создать новую ссылку для команды продукта. Поскольку значения хранилища доступны только для чтения, вы можете изменить их напрямую.

 subscribe((productCommand )=>{
     this.productCommand = {...productCommand }
})