#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 }
})