如何在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我们得到：

  

默认更改检测算法通过在更改检测运行中按引用比较绑定属性值来查找差异。

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

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