राज्य के लिए बाध्यकारी - क्या यह अपेक्षित व्यवहार है? - कोणीय, एनजीएक्स

मेरे पास एक राज्य है जिसमें वस्तुओं का एक संग्रह है:

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

धन्यवाद!

उत्तर:

उत्तर № 1 के लिए 1

यह एक बग नहीं है, यह एक सुविधा है ;)

राज्य के एक टुकड़े का चयन करते समय यह वास्तव में उस वस्तु को वापस कर देगा जो राज्य है।

जिसका अर्थ है कि यदि आप किसी संपत्ति को किसी और चीज़ में बदलते हैं तो राज्य अपडेट हो जाएगा।

फॉर्म के साथ काम करते समय मैं आपको क्या सुझाव दूंगा कि आप इसे एनकोमॉडल के साथ बदलना शुरू करने से पहले डेटा की एक प्रति बनाएँ।

प्रतिक्रियात्मक रूपों का उपयोग करते समय पैचवैल्यू नामक एक फ़ंक्शन होता है जो यह करेगा। https://angular.io/guide/reactive-forms#patchvalue

जब यह सामान्य रूपों की बात आती है, तो आपको इसे मैन्युअल रूप से करना होगा।

लताश एक फ़ंक्शन के साथ आता है जिसे क्लोनडिप कहा जाता है जो आपको मदद करना चाहिए https://lodash.com/docs#cloneDeep

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

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

---