Проблема синхронизации данных в Angular 5 и Ionic 3

Question

Я загружаю cartArray из локального API.Я хочу напечатать общую стоимость из деталей корзины.Моя переменная totalPrice всегда равна 0 даже после вызова API.Пожалуйста, решите проблему.

файл addtoCart.ts:

constructor(public navCtrl: NavController, private apiService: ApiService, public popoverCtrl: PopoverController, public navParams: NavParams) {
    this.path = ENV.imageUrl.concat('assets/imgs/medicalStore.png');
    if(localStorage.getItem('isLogin')!= null){
      this.userDetail=JSON.parse(localStorage.getItem('userDetails'));
        this.user_id=this.userDetail['user_id'];

      this.apiService.getCartProducts(this.user_id).subscribe(response => {
        if(response['status'] == 200) {
          this.cartArray = response['response'];
            this.cartArray.forEach((item, index) => {
              console.log(item.price); 
            this.totalPrice = this.totalPrice + item.price * item.quantity;
            });
        } else if(response['status'] == 500) {
          console.log(response['error'].sqlMessage);  
        }
      }); 

addtoCart.html:

<ion-card padding>
    <b>Order Summary</b><hr />
    <ion-item>No of Items: {{cartArray.length}}</ion-item>
    <ion-item style="text-align:center;"><hr /><b>Amount Payable: Rs.{{totalPrice}}</b><hr /></ion-item>
</ion-card>

http ответ

"response":[{"id":1,"user_id":1,"user_name":"adi","product_id":1,"product_name":"knee cap","price":123,"quantity":2,"size":"small","colour":"blue","cart_date":"2018-06-07T10:33:34.000Z"},{"id":5,"user_id":1,"user_name":"adi","product_id":1,"product_name":"knee cap","price":123,"quantity":2,"size":"small","colour":"blue","cart_date":"2018-06-07T10:43:49.000Z"}]