我正在使用 Ionic 和 Angular 創建一些應用程式，并且在分配屬性時遇到了一些奇怪的問題。
所以，我有一個簡單的組件，它呈現一些過濾器供用戶選擇：
<ng-container *ngFor="let filter of filters; let idx = index">
<div class="filter-wrapper">
{{ filter.text | transloco | uppercase }}
<div class="icon-wrapper" (click)="handleFilterClick(idx, $event)">
<app-icon-button
[color]="filter.isActive ? activeIconColor : inActiveIconColor"
[src]="filter.iconSrc"
>
</app-icon-button>
</div>
</div>
</ng-container>
過濾器陣列如下所示：
filters: Filter[];
constructor(
private store: Store<AppState>,
) {}
ngOnInit() {
this.filters = [
{
iconSrc: 'assets/icons/white-filters-icons/parking.svg',
text: 'shared.attribute.parking',
isActive: false,
filter: Attribute.PARKING,
},
{
iconSrc: 'assets/icons/white-filters-icons/wc.svg',
text: 'shared.attribute.wc',
isActive: false,
filter: Attribute.WC,
},
{
iconSrc: 'assets/icons/white-filters-icons/food.svg',
text: 'shared.attribute.food',
isActive: false,
filter: Attribute.FOOD,
}
]
}
過濾器可以正確呈現，沒有任何問題，但是我有一個處理過濾器點擊的函式，它看起來像這樣：
handleFilterClick = (idx: number, e: MouseEvent): void => {
this.filters[idx].isActive = !this.filters[idx].isActive;
const selectedFilters = [...this.filters.filter(el => el.isActive)];
this.store.dispatch(new SetSelectedFilters({ filters: selectedFilters }));
e.stopImmediatePropagation();
};
當我第一次單擊任何過濾器時，它可以正常作業，正在更改過濾器顏色，正在執行調度操作，但是如果我單擊任何先前單擊的過濾器，它就會停止作業，并且我可以在控制臺中看到一個錯誤，上面寫著： “試圖分配給只讀屬性。 ”。只有當我洗掉帶有商店調度功能的行時它才能正常作業
this.store.dispatch(new SetSelectedFilters({ filters: selectedFilters }));
誰能告訴我這怎么可能？
編輯：
SetSelectedFilters 和 reducer 是這樣創建的：
export enum ActionTypes {
SET_SELECTED_FILTERS = '[Map] Set selected filters',
}
export class SetSelectedFilters implements Action {
readonly type = ActionTypes.SET_SELECTED_FILTERS;
constructor(public payload: { selectedFilters: Filter[] }) { }
}
export type Actions = SetSelectedFilters;
減速機在這里：
export interface MapState {
selectedFilters: Filter[];
};
export const initialState: MapState = {
selectedFilters: [],
};
export const reducer = (
state = initialState,
action: fromMap.Actions
): MapState => {
switch (action.type) {
case fromMap.ActionTypes.SET_SELECTED_FILTERS: {
return {
...state,
selectedFilters: action.payload.selectedFilters,
};
}
default: {
return state;
}
}
};
uj5u.com熱心網友回復：
你有這個錯誤，因為在 Ngrx 運行時檢查strictActionImmutability設定為 true （它將在生產構建中自動禁用）。
https://ngrx.io/guide/store/configuration/runtime-checks
因此，您可以將此標志設定為 false，或者您需要確保操作物件的不變性（也許通過對過濾器進行深度克隆？）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532581.html
標籤：有角度的离子框架ngrx