0

アイテムのコレクションを含む状態があります。

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

ありがとう!

4

1 に答える 1