调用Angular服务导致无休止的循环

Question

我正在调用CartComponent.html模板中的getSubtotal（）方法，如下所示：

<div class="col-lg-4 bg-white text-right">
   <p class="font-bold">
      {{cartService.getSubtotal() | currency:'USD':'symbol-narrow'}}
   </p>
</div>

这是CartService的getSubtotal方法，它现在只记录cartItems对象：

public getSubtotal() {
   var subtotal:number = 0;

   console.log('getSubtotal() ', this.cartItems)
   // for(let item of this.cartItems) {
   //   subtotal += this.getItemPrice(item);
   // }

   return subtotal;
 }

显然，无限制地调用了getSubtotal方法。它在循环中打印出来：

getSubtotal()  (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]