0

我确信对此有一个合理的解释，但我真的很困惑为什么对象属性会在视图中更新，而原始类型的变量却没有。我正在使用来自 ngrx/store 的 observables，所以这可能是原因，但我觉得我在其他异步情况下看到过这种情况，所以我试图理解它。

例如，我有这个模板：

 <h1>{{data.counter}}</h1>
 <h1>{{dataCounter}}</h1>

然后在我的组件的 TypeScript 类中，我有这样的东西：

ngOnInit() {
  this.store.select('mainStoreReducer')
    .subscribe((data: MyState) => {
      this.zone.run(() => {
      this.dataCounter = data.counter;
      this.data = data;
    });
}

当我查看屏幕时，表示 dataCounter 变量的文本未更新，但表示 data.counter 的文本已更新！即使是强制 zone.js 运行的额外块也无济于事。dataCounter 仍然显示原始文本（注意：实际发生的是 dataCounter 获取初始状态的值，但在以后触发订阅时它永远不会更新。data.counter 的文本总是更新）。有人可以解释一下吗？

这是我所描述的情况的一个 plunkr： https ://plnkr.co/edit/gEeAKK31Yo6kATjFQY08?p=templates

4

1 回答 1

3

如您所见，在调度事件后未执行订阅处理程序CHANGE_STUFF

data.counter正在更新，因为在您的内部您mainStoreReducer改变了这个对象而不是创建新对象。

这是你出错的地方：

let newState = Object.assign(state);

它应该是：

let newState = Object.assign({}, state);

或者更好的方法：

let newState = Object.assign({}, state, { counter: 13 });

Plunker 示例

为了更好地理解，请参阅 Reducers 文档

于 2016-12-10T18:50:16.300 回答