Угловая материальная таблица суммы элементов массива

Question

Так как это мой первый пост здесь, я хотел бы сказать всем привет, так что ...

Привет всем:)

У меня проблема с angular и html, и я не могунайти способ решить это.Допустим, у меня есть 2 интерфейса:

export interface Product {
    name?: string;
    price?: number;}

export interface Meal {
    name?: string;
    products?: Array<Product>;}

Я хочу создать такую ​​таблицу:

meal name | price
pizza     | 10    

Где 10 - сумма цен каждого продукта в еде.

Теперь я не могу найти способ суммировать эти цены в HTML.Это возможно или я должен сделать это в файле TS?Или, может быть, это должно быть сделано в Java-бэкэнде и спросить с отдыхом?Или, может быть, я должен добавить «totalPrice» в класс еды?

Это мой стол:

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> meal name </th>
      <td mat-cell *matCellDef="let element">
        {{element.name}}
      </td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef> price </th>
        <td mat-cell *matCellDef="let element">
          //<ng-container *ngFor="let product of element.products">
          //{{product.price}}
          //</ng-container>
      </td>
    </ng-container>

Answer 1

Вы можете сделать это, используя функцию Array.reduce () .

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

<td mat-cell *matCellDef="let element">
  {{calculateMealTotal(element.products)}}
</td>

А в файле компонента:

calculateMealTotal(products: Product[]): number {
  return products.reduce((acc, product) => acc + product.price, 0)
}

Суммирует общую стоимость всех продуктов.