Question

我想计算Angular（6）表中每行的子代总数。一道菜的食材价格昂贵。我想总结一下每道菜的价格。

“角度”表仅显示所有父级的第一个父级的总和。我猜是由于总回报。当我除去 return total 时，console.log将显示每个父级的正确输出。当我在下面加上“返回总计”一个括号时，它仅显示最终父母的总和。

如何确保Angular为每个父级提供输出？（因此，继续循环并在每行打印正确的输出）？预先感谢！

 calcPrice() {

    for (let dish of this.dishes) {

      let total = 0;

      for (let ingredient of dish.ingredients) {
        total += ingredient.pricePerUnit;

      }
      return total;
    }
  }

html：

<tr *ngFor='let dish of dishes'>
  <td>{{ calcPrice() }}</td>

Answer 1

您可以在reduce上使用单线。

JS示例：

const dishes = [
  { name: 'Chicken Parm', ingredients: [
    { name: 'Soy sauce', price: 2, amount: 200 },
    { name: 'Chiken', price: 5, amount: 150 },
    { name: 'Parmigiano Regiano', price: 8, amount: 50 },
    { name: 'Olive oil', price: 1.5, amount: 10 },
  ]}
];

function dishPrice(dish) {
  return dish.ingredients.reduce((p, n) => p + n.price, 0);
}

console.log(`Expected : 2+5+8+1.5=${2+5+8+1.5}, Got ${dishPrice(dishes[0])}`);

Reduce是一个Javascript函数，它将遍历每个项目，最后返回一个值。

签名为

reduce(callback(previousElement, nextElement), firstValue);

（previousElement是第一项上的firstValue）

在Angular表中显示每个父母的孩子总数

1 个答案: