对国家具有约束力-这是预期的行为吗? [英] Binding to State - is this expected behaviour?

问题描述

我的状态包含项的集合:

I have a state that contains a collection of items:

import { State, Action, StateContext } from '@ngxs/store';
import {AddItem} from './app.actions';

export interface Item { 
  id: number;
  name: string;
}

export interface AppStateModel { 
   items: Item[];
}

@State<AppStateModel>({
  name: 'app',
  defaults: {
    items: []
  }
})
export class AppState { 

  @Action(AddItem)
  addItem(ctx: StateContext<AppStateModel>, action: AddItem){
     const state = ctx.getState();

        ctx.patchState({
            items: [
                ...state.items,
                { id: action.id, name: action.name}
            ]
        });
  }

}

当我添加反映在显示的列表中的新项目时，我的组件已订阅商店中的项目列表(一切正常).

My component is subscribed to the list of items in the store, when I add a new item that is reflected in the list displayed (all fine).

然后我将显示的项目绑定到input字段-当我在该输入字段中键入内容时，我似乎正在修改该项目的状态，即该项目的视图名称"显示也正在更改.

I then bind that displayed item to an input field - when I type in that input field I seem to be modifying the state of that item, i.e. the 'View Name' display of the item is also changing.

<ng-container *ngIf="app$ | async as app">

Name: <input #name />
<button (click)="addItem(name.value)">Add Item </button>

<br/>
<br/>

Items List:

<div *ngFor="let item of app.items">
  View Name: <span>{{item.name}}</span>
</div>

<br/>

Items List 2 with updates:

<div *ngFor="let item of app.items">
  Update Name: <input [(ngModel)]="item.name" />
</div>

</ng-container>

这是预期的行为吗?我原以为我不会在仅查看"列表中看到该更改.

Is this expected behaviour? I was expecting that I would not see that change reflected in the 'view only' list.

或者这仅仅是我做我不应该做的事情的一个例子-我知道我真的应该通过这样的动作将更改分发给商店:

Or is this just a case of me doing something I shouldn't be - I know I should really be dispatching that change via an action to the store like this:

Update Name: <input [ngModel]="item.name" (ngModelChange)="updateItem(item.name)" />

updateItem(value) {
   this.store.dispatch(new UpdateItemAction(value));
}

我正在用

* ngxs: 3.0.1
* @angular/core: 6.0.0

在此处查看完整的示例存储库 https://github.com/garthmason/ngxs

See full sample repo here https://github.com/garthmason/ngxs

谢谢！

推荐答案

这不是bug，而是功能;)

It's not a bug, it's a feature ;)

选择一个状态时，实际上会返回该状态的对象.

When selecting a piece of the state it will in fact return the object that is the state.

这意味着如果将属性更改为其他状态，状态将得到更新.

Which means that if you change a property to something else the state will get updated.

在使用表单时，我建议您先复制数据，然后再开始使用ngModel进行更改.

What I would suggest when working with a form is that you make a copy of the data before you start changing it with ngModel.

当使用反应形式时，有一个名为patchValue的函数将执行此操作. https://angular.io/guide/reactive-forms#patchvalue

when using reactive forms there is a function called patchValue which will do this. https://angular.io/guide/reactive-forms#patchvalue

涉及普通表格时，您将必须手动进行.

When it comes to normal forms you will have to do it manually.

lodash带有一个名为cloneDeep的函数，该函数可以帮助您 https://lodash.com/docs#cloneDeep

lodash comes with a function called cloneDeep which should help you https://lodash.com/docs#cloneDeep

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

这篇关于对国家具有约束力-这是预期的行为吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！