首页 文章

Angular Ngrx Store和双向数据绑定

提问于
浏览
1

我正在学习如何在Angular 5中使用ngrx / store库,我发现了一个意想不到的行为......请帮助我理解这是否是这个库的默认行为,因为我真的没想到这个 . ..

好吧,我的目标是创建一个单例存储来存储应用程序配置和所有组件的多个状态,因此当组件更新存储时,所有订阅的组件都会收到更新的存储 .

在我的一个组件中,我使用以下构造函数:

newItems: any

constructor (
private _store: Store<State>
) {

_store.select('operations').subscribe(state => {
  console.log(state)
  this.newItems = state.newItems
})

}

所以我 grab 了我的商店的当前状态,并将“this.newItems”变量设置为“state.newItems” . 我的模板中有一些输入与“newItems”的某些属性绑定,如下所示:

itemProperties: any = [
{
  name: 'Description',
  key: 'desc'
},
{
  name: 'Manufacturer',
  key: 'manufacturer'
},
{
  name: 'Model',
  key: 'model'
},
{
  name: 'Observation',
  key: 'genObs'
}
]

<div *ngFor="let prop of itemProperties" class="gen-label-input" [ngClass]="{'filled': newItems[prop.key]}">
    <label>{{prop.name}}</label>
    <input [(ngModel)]="newItems[prop.key]">
</div>

我期望在我的组件中调度一个动作来实际修改我的商店,但似乎通过[(ngModel)]的双向数据绑定是自动完成的,而不需要任何操作!我只是修改我的输入,我的商店已更新,更新的版本可通过我的整个应用程序自动获得 .

当我将一个商店属性分配给组件变量并将其与[(ngModel)]组合时,这是ngrx / store的预期行为吗?

如果是的话,这在某些情况下确实很好,因为我不必创建许多操作来修改我的商店属性 . 但我担心这是某种我无法识别的错误 .

提前致谢!

2 回答

  • 1

    您应该在收到商品时从商店创建商品的副本

    this.newItems = state.newItems.map((item) => Object.assign({}, item))
    

    是的,如果值是数组或对象,它是预期的行为

  • 0

    是的,这是预期的行为,你是对的,国家应该是不可改变的 .

    您可以在开发模式下使用ngrx-store-freeze来帮助您检测何时执行您不应该执行的操作 .

相关问题