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功能＆＃39;找到＆＃39;完成这件事。

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)用于添加

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

1 个答案: