我有一个包含项目集合的状态:
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}
]
});
}
}
当我添加一个反映在显示列表中的新项目时,我的组件订阅了商店中的项目列表(一切正常)。
观察到的行为
然后,我将该显示的项目绑定到一个input
字段 - 当我在该输入字段中键入时,我似乎正在修改该项目的状态,即该项目的“查看名称”显示也在发生变化。
<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>
这是预期的行为吗?我原以为我不会在“仅查看”列表中看到该更改。
或者这只是我做我不应该做的事情的一个例子 - 我知道我真的应该通过这样的操作将更改发送到商店:
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
谢谢!