Angular 无法在组件中直接设置属性 html

Question

component.ts 中的示例：

tmptotal:number;
this.tmptotal=this.orderService.orderTotal;

在组件中。html：

{{tmptotal}}

以上不起作用。

但如果我喜欢在 component.ts 中：

totalPrice(){
    this.tmptotal=this.orderService.orderTotal;
    return this.tmptotal;
}

和组件。html

{{totalprice()}}

这行得通。 第一个例子有什么问题。 我是 Angular 的新手，无法弄清楚原因。

Answer 1

组件内的任何代码初始化都建议在OnInit生命周期钩子中处理，而不是在构造函数中处理。 我建议采用以下方法：

组件.ts

@Component({...})
export class YourComponent implements OnInit {
  tmptotal: number;
  
  constructor(private orderService: OrderService) {}

  ngOnInit(): void {
    this.tmptotal = this.orderService.orderTotal;
  }
}

模板

<p>{{ tmptotal }}</p>