同样的数据在angular9.why中显示不同？

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 永远不会改变 - 你为这个 class 成员分配一个函数并且你永远不会重新分配它 - 所以每个变化检测周期都会看到 bar 仍然是同一个实例并且不更新它（即因为实例是相同的，我们甚至不要求值）
{{ "" + bar }}：在每个变化检测周期中，表达式 "" + bar 将被评估。评估此字符串连接时，我们必须获得 bar 的 value，这将由您的计时器更新。因此字符串连接的结果将始终是一个新的字符串实例，因此更改检测将更新视图。

同样的数据在angular9.why中显示不同？

The same data is displayed differently in angular9.why?

asynchronous

typescript

zonejs

angular

angular9