общая сумма не работает на angular с использованием forEach

Question

Я пытаюсь получить общую сумму из API и мой код .ts файл

getProducts() {
this.service.getcustomize().subscribe((res) => {
  this.Products = res['result']
})
  }
  get cartTotal() {
    let total = 0;
    this.Products.forEach((data, index) => {
      total += data['price'];
    });
    return total;
  }

мой html файл

 <h5 class="text-right">Total:
      <span class="ml-1 font-weight-bold text-danger">{{ cartTotal | currency }}</span>
    </h5>

но я получаю

$12,001,200.00

мой список API

 {success: true, result: [,…]}
    result: [,…]
    0: {productId: 197, 
    price: "1200"
    createdAt: "2020-05-04T07:45:41.000Z"
    updatedAt: "2020-05-04T07:45:41.000Z"
    1: {productId: 198, 
    price: "1200"
    createdAt: "2020-05-04T07:45:41.000Z"
    updatedAt: "2020-05-04T07:45:41.000Z"
    }

Я должен получить 2400 долларов, но я получаю 12,001,200,00

Answer 1

потому что при использовании + со строкой вы не добавляете, а объединяете строки

используйте эту

total += parseFloat(data['price']);

отметьте это, чтобы понять разницу

 var a = "123"
 var b = "567"
 
 console.log(a+b)
 console.log(parseFloat(a)+parseFloat(b))

Answer 2

потому что цена - это строка, которую нужно преобразовать в число. Просто примените parseFloat к нему.

total += parseFloat(`${data['price']}`);

Обертка с кавычками преобразует все типы в строку, поэтому, если цена становится числом, parseFloat не потерпит неудачу.