Question

在我的Angular 2模板中，我有一个非常繁琐的计算：

<td class="text-right"><strong>
                    {{((avgGrossProfitPer * addMonthlySalesVolume) + (addMonthlySalesVolume * addCarryingCostProf / 100) + 
                    (accessAmount + 10 + numChecks + (addMonthlySalesVolume * 0.075)) || '0') | currency:'USD':true}}
                    </strong>
                </td>

此处的所有变量均由input [(ngModel)]="templateName"设置。但是，我想要做的是将此计算的值设置为变量，因此我不必再次复制/粘贴整个公式。

我尝试过的是：

<td class="text-right"><strong #monthlyroi>
                    {{((avgGrossProfitPer * addMonthlySalesVolume) + (addMonthlySalesVolume * addCarryingCostProf / 100) + 
                    (accessAmount + 10 + numChecks + (addMonthlySalesVolume * 0.075)) || '0') | currency:'USD':true}}
                    </strong>
                </td>

<!--Try to return the value of the calculation above-->
<span>{{monthlyroi}}</span>

然而，{{monthlyroi}}返回＆＃34; [对象HTMLElement]＆＃34;在页面上呈现时。

Answer 1

您可以引用所有这些变量这一事实意味着它们是您组件的成员。这意味着您可以将复杂的计算封装在方法

中

在您的组件中，

export class MyComponent {
 .......

  myFancyCalculation(): number {
    return ((this.avgGrossProfitPer * this.addMonthlySalesVolume) +
            (this.addMonthlySalesVolume * this.addCarryingCostProf / 100) +
            (this.accessAmount + 10 + this.numChecks + (this.addMonthlySalesVolume * 0.075)) || '0')
  }
}

现在你可以在你的模板中使用myFancyCalculation()（当然也适当命名）。

选择方法而不是变量的原因是，对于变量，您必须在各种输入变量发生变化时手动保持更新该计算变量。通过使用函数，您不再需要执行手动同步。

仅供参考，考虑到计算的大小，我可能会创建一些辅助方法来更好地封装和描述计算正在做什么。

修改

您可以将计算中的变量添加为MyComponent的成员变量

例如：导出类MyComponent { ....... avgGrossProfitPer：number; addMonthlySalesVolume：number; 等...

执行上述操作将允许您访问myFancyCalculation方法中的变量。

第二个选项是更改myFancyCalculation以接受各个字段作为参数。在这种情况下，在myFancyCalculation中，您不会使用this.为变量添加前缀，因为它们只是您方法的参数

例如。 myFancyCalculation（avgGrossProfit：number，addMonthlySalesVolume：number ... etc）

在你的模板中，

<td class="text-right"> <strong> {{ myFancyCalculation(avgGrossProfitPer, addMonthlySalesVolume ... etc) }} </strong>

Angular 2：将数学语句分配给模板中的变量？

1 个答案: