相同的数据在 angular9 中显示不同。为啥?

Posted

技术标签:

【中文标题】相同的数据在 angular9 中显示不同。为啥?【英文标题】:The same data is displayed differently in angular9.why?相同的数据在 angular9 中显示不同。为什么? 【发布时间】:2020-08-24 04:45:27 【问题描述】:

在下面的例子中,

第一个表达式 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

【问题讨论】:

只是一个理论(对这种行为没有任何启发):当它只需要取消引用一个变量并且必须计算它将显示在花括号内的值时,Angular 处理不同的简单表达式. 【参考方案1】:

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

bar :实例bar 永远不会改变——你为这个类成员分配了一个函数并且你永远不会重新分配它——所以每个变化检测周期都会看到bar 仍然是同一个实例并且不会更新它(即因为实例相同,我们甚至不要求值) "" + bar :在每个更改检测周期中,都会评估表达式 "" + bar。评估此字符串连接时,我们必须获取bar,该值将由您的计时器更新。因此字符串连接的结果将始终是一个新的字符串实例,因此更改检测将更新视图。

【讨论】:

为什么 bar 是 'two' ,而不是 'one' 或 'default'? ngOnInit 完成之前视图不会更新 - 所以最后一个分配“获胜”。检查life-cycle docs

以上是关于相同的数据在 angular9 中显示不同。为啥?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我在具有不同哈希的两个分支中有相同的提交

当两个版本具有相同的行为时,为啥这个 Swift 游乐场会显示不同数量的执行? [复制]

为啥在 SwiftUI 中显示视图时 List 的背景颜色不同?

为啥不同的treeItems链接到相同的数据

为啥 CSS 中的绝对单位在不同的屏幕中没有真正显示为绝对单位?

为啥 switchMap 在 Angular 拦截器(Angular 9)中不起作用