如何在Angular 5中使用ngrx状态更新数组中的一个或多个对象属性？

Question

我有一个要存储在状态中的元素数组，该数组看起来像这样：

filterList: Array<any> = [
    {name: "Branch", filters: [{value: "Location 1", status: "unselected"}, {value: "Location 2", status: "selected"}]},
    {name: "Segment", filters: [{value: "Segment 1", status: "selected"}, {value: "Segment 2", status: "selected"}]},
     ...... and so on
]

该数组是一个巨大的列表，我想在其中添加一个对象到filters数组，或者将status属性从unselected更改为selected ，甚至将更多对象添加到filterList 。

如何设置状态，仅更改所需的内容，而不更改整个数组？ 截至目前，我一直在尝试一些尝试，但无法解决。 这是我尝试过的。

case FilterActions.FILTER_LIST:
   return {
      ...state,
      filterList: [...state, action.payload]
   };

另外，我该如何调度动作来一次仅更新几个元素？ 我一直在尝试这样做。

this.store.dispatch(new MainActions.FilterListActions([{name: "Branch"}, filters: [{value: "Location 1", status: "selected"}]]));

请帮我解决这个问题。

更新

这是store.actions.ts的代码

import {Action} from '@ngrx/store';

export const FILTER_LIST = 'FILTER_LIST';

export class FilterListAction implements Action {
  readonly type = FILTER_LIST;
  constructor (public payload: Array<any>) {}
}

export type FilterActions = FilterListAction;

这是store.reducer.ts文件的代码：

import * as FilterActions from './store.actions';

const initialState = {
  filterList: []
};

export function filtersReducer(state = initialState, action: FilterActions.FilterActions) {
  switch (action.type) {
     case FilterActions.FILTER_LIST:
        return {
          ...state,
          filterList: [...state, action.payload]
        };
     default: return state;
  }
}

Answer 1

我相信您可以使用简单的js / ts函数“查找”来完成此操作。

let filterList: Array<any> = [
    {name: "Branch", filters: [{value: "Location 1", status: "unselected"}, {value: "Location 2", status: "selected"}]},
    {name: "Segment", filters: [{value: "Segment 1", status: "selected"}, {value: "Segment 2", status: "selected"}]},
     ...... and so on
]

考虑需要添加对象的情况

  let toBeAddedFilter = {value: "Location 1", status: "unselected"}

filters name= "Branch" 。

然后您使用filter()像

filterList.find(x=>x.name=="Branch").filters.push(toBeAddedFilter);

还可以更改特定分支的一个特定位置的状态

filterList.find(x=>x.name=="Branch")
    .filters.find(y=>y.value="Location 1").status ='selected';

我相信您可以在此示例中为每种需要创建一个函数。 这不会更改整个数组。

完成如果过滤器类别发生更改，请使用函数将filtercategory名称的值传递给自定义数组更新函数。 如果它属于某个过滤器类别的过滤器中的内容，则也可以通过。 函数可以像okThisChanged(filtercategory,value,newStatus)进行编辑，而okThisFilterAdded(filtercategory,newlyAddedFilter)进行添加