Angular直接赋值的组件属性无法在HTML中访问的问题

第一种写法失效的核心原因有两个：

• 初始化时机不匹配
  你直接给tmptotal赋值的操作如果是在组件初始化阶段（比如ngOnInit）执行的，此时orderService.orderTotal可能还没被正确赋值（比如它是通过异步请求、用户操作等后续才更新的数据）。这时候tmptotal拿到的只是orderTotal的初始值（可能是undefined或默认的0），后续orderTotal更新时，tmptotal不会自动同步这个变化——因为number是原始类型，赋值是值传递，两者之后就各自独立了。

• 缺乏自动更新机制
  Angular的变更检测会在特定场景（比如用户交互、HTTP响应、定时器触发）下触发，重新渲染模板。第一种写法里的tmptotal是普通变量，一旦赋值后就不会自动关联orderService.orderTotal的后续变化，模板里的{{tmptotal}}只会显示第一次赋值的旧值。而第二种写法的totalPrice()方法，每次变更检测时都会被调用，重新获取orderService.orderTotal的最新值，所以能正常显示更新后的结果。

如果想保持模板里用{{tmptotal}}的写法，可以用TypeScript的getter来替代直接赋值，这样既简洁又能自动获取最新值：

get tmptotal(): number {
  return this.orderService.orderTotal;
}

这样模板里的{{tmptotal}}每次变更检测时都会调用这个getter，拿到orderService.orderTotal的最新值，效果和调用方法一致，但写法更优雅。

内容的提问来源于stack exchange，提问作者Dinesh