Angular 2：將數學語句分配給模板中的變量？

在我的角2模板，我在的形式極其繁瑣的計算：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}}返回「[HTML元素的對象]」在網頁上呈現的時候。

來源

2017-03-15 user3183717

你有沒有考慮只是把一個函數接受你所需要的參數和返回你想要的值雙花括號？ – Gab

我有，雖然我是新來Angular 2，所以不知道什麼是最好的方法來處理這個。我試着在'app.component中寫一個函數。ts'接受這些值作爲參數，但是我希望每次用戶更改輸入時都自動更新這個值，所以我在模板中到處都有很多'（keyup）=「functionName（myparamaters）''讓事情變得笨重。 – user3183717

相反，您可以使用'（change）= ...'而不是'（keyup）= ...' – Gab

您可以參考所有這些變量的事實意味着它們是組件的成員。這意味着，你可以封裝複雜的計算方法中的

在您的組件，

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：數; addMonthlySalesVolume：number; etc ...

通過以上操作可以訪問myFancyCalculation方法中的變量。

第二個選項是將myFancyCalculation更改爲接受各個字段作爲參數。在這種情況下，在myFancyCalculation中，您不會在變量前添加this.，因爲它們只是您的方法的參數

例如， myFancyCalculation（avgGrossProfit：編號，addMonthlySalesVolume：數...等）

且模板中，

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

來源

2017-03-15 23:05:22 snorkpete

但是我需要做的是每次都調用這個計算我的一個變量的值被改變了。所以我必須在每個輸入處添加'（change）=「myFancyCalculation（）」'來定義我的變量嗎？ – user3183717

您提到計算中使用的各種變量綁定到使用ngModel的輸入字段？如果是這樣，那麼ngModel將在用戶鍵入輸入時更新單個變量值，然後Angular的變化檢測將更新視圖中的計算。您不必添加單獨的（更改）綁定。假設你對單個變量使用ngModel – snorkpete

當我編寫你在'app.component.ts'中提供的函數時，我得到錯誤：''Property'variableName'在所有類型的'AppComponent'.'上都不存在我的變數。我不確定如何在這種情況下讓它們「存在」，當我在'app.compoment.html'中用'' – user3183717

Angular 2：將數學語句分配給模板中的變量？

回答

相關問題