сумма объектного поля в html / angular?

Question

как я могу реализовать сумму dish.dishCost?Звучит просто, но у меня все еще есть проблемы, я попробовал много разных вещей в своей корзине basket.component.html ...

basket.component.html:

<tbody *ngFor='let dish of dishesInBasket'>
  <tr>
    <td data-th="Product" >
      <div class="row" >
        <!-- <div class="col-sm-2 hidden-xs"><img src="http://placehold.it/100x100" alt="..." class="img-responsive" /></div> -->
        <div class="col-sm-10">
          <h4 class="nomargin" >{{dish.dishName}}</h4>
          <p>{{dish.dishDescription}}</p>
        </div>
      </div>
    </td>
    <td data-th="Price">{{dish.dishPrice}} €</td>
    <!-- <td data-th="Quantity">
      <input type="number" class="form-control text-center" value="1">
    </td> -->
    <!-- <td data-th="Subtotal" class="text-center">1.99</td> -->
    <!-- <td class="actions" data-th="">
      <button class="btn btn-info btn-sm"><i class="fa fa-refresh"></i></button>
      <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
    </td> -->
  </tr>
</tbody>
<tfoot *ngFor='let dish of dishesInBasket'>
  <tr class="visible-xs">
    <td class="text-center"><strong>Total 1.99</strong></td>

в последней строке мне нужна сумма dish.dishCost.возможно ли это с * ng *** в html, или мне нужно реализовать его в файле .ts?

Я также не нашел решения в файле .ts: (

basket.component.ts:

import { BasketService } from './basket.service';
import { Component, OnInit } from '@angular/core';
import { ShoppingCartModule } from 'ng-shopping-cart';
import { Dish } from '../dishes/dishes';

@Component({
  selector: 'app-basket',
  templateUrl: './basket.component.html',
  styleUrls: ['./basket.component.css']
})
export class BasketComponent implements OnInit {

  constructor(private basketService: BasketService) { }

  dishesInBasket: Dish[] = [];

  ngOnInit() {
    this.basketService.getDishesFromBasket().subscribe(
      dishes => this.dishesInBasket = dishes);

  }

}

заранее спасибо!

Answer 1

В вашем файле .ts:

export class BasketComponent implements OnInit {
  dishSum = 0;

  constructor(private basketService: BasketService) { }

  dishesInBasket: Dish[] = [];

  ngOnInit() {
    this.basketService.getDishesFromBasket().subscribe(
      dishes => {
        this.dishesInBasket = dishes;
        this.dishesInBasket.forEach(item => {
            this.dishSum += item.dishCost;
        });
        console.log(this.dishSum);
  });

  }
}

В вашем HTML-шаблоне:

<strong *ngIf="dishSum!==0">Total {{dishSum}}</strong>