javascript - 如何检测 Angular2 中 Date 对象的变化？

Question

使用 setDate 方法修改的日期对象不会在模板中更新。

在模板中:

<p>{{date | date:'mediumDate'}}</p>

在组件中:

  nextDay(){
    this.date.setDate(this.date.getDate()+1);
  }

但是当我调用 nextDay 函数时，模板不会更新为新值。

我能让变化检测工作的唯一方法是这样做:

  nextDay(){
    var tomorrow = new Date();
    tomorrow.setDate(this.date.getDate()+1);
    this.date = tomorrow;
  }

是否有更好的方法来完成同样的任务？

Answer 1

我认为这是更改日期变量引用的正确方法。来自文档 here我们有:

The default change detection algorithm looks for differences by comparing bound-property values by reference across change detection runs.

因此，如果日期引用保持不变，则不会发生任何事情。您需要一个新的日期引用，这就是第二个版本的 nextDay() 起作用的原因。

如果删除格式化管道，您将看到仍然只有 nextDay() 的第二个版本有效。