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)
}

这将汇总所有产品的总价值。

数组元素的角材料表总和

1 个答案: