angular - 同样的数据在angular9中显示不同，为什么？

Question

在以下示例中，

第一个表达式 {{ bar }}永远不会更新，但

第二个表达式 {{ "" + bar }}更新:

例如

two
1588950994873

为什么会这样？

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    What is different and why?
    <br />
    {{ bar }} <br />
    {{ "" + bar }} <br />
  `
})
export class AppComponent {
  value: string = "default";

  bar: any = d => {
    this.value = d;
  };

  ngOnInit() {
    this.bar.valueOf = () => this.value;
    this.bar("one");
    setInterval(() => this.bar(Date.now() + ""), 1000);
    this.bar("two");
  }
}

Stackblitz example

Answer 1

原因是 Angular 变化检测通过比较表达式的实例来工作:

{{ bar }} : 实例 bar从不改变——你为这个类成员分配了一个函数，你永远不会重新分配它——所以每个变化检测周期都会看到bar仍然是同一个实例并且不更新它(即由于实例是相同的，我们甚至不要求该值)

{{ "" + bar }} :在每个变更检测周期中，表达式 "" + bar将被评估。当计算这个字符串连接时，我们必须得到 值 的 bar这将由您的计时器更新。因此字符串连接的结果将始终是一个新的字符串实例，因此更改检测将更新 View 。