angular ngrx存储更新单个属性

时间:2018-07-27 08:40:30

标签: angular ngrx-store

我正在使用角度为6的ngrx存储。我有一个实体,正在使用ngModel绑定通过输入框进行更新。 我在Input的change事件中调用Update属性操作来更新存储中实体的状态。 该更新工作正常,我可以看到此更新正在运行。 不过,如果可能的话,我想通过从输入控件上的ngModel指令获取绑定的属性并将其传递给动作来制作一个更新属性状态的通用函数。这样,可以执行一般的更新操作。

这是一个说明性代码,用以说明我的意思: 1)Follwing是绑定了tagClip属性的组件的html:

<label>
  <input
    type="text"
    [ngModel]="tagClip"
    (change)="updateProperty($event)"> Include tag clip
</label>

2)在组件的ts back文件中是updateProperty函数:

updateProperty() {
    this.store.dispatch({
        type: UPDATE_PROPERTY
        payload: {
           // Following a dummy code to retrieve the binded property
           updatedProp: $event.target..ngModel.BindedProperty,   
           value: $event.value                                                       
        }
    });
 }

3)最后,商店的减速器代码如下:

export function petTagReducer(state: PetTag = initialTag, action: Action)           
{
    switch (action.type) {
      case UPDATE_PROPERTY: {
          let newState = _cloneDeep(state);
          newState[updatedProp] = payload.value
          return newState
      }

      default:
       return state;
    }
}

预先感谢, Chaim

0 个答案:

没有答案