Adding values together in a formattedNumber Aura component

Question

I have two numeric values that I want to add together and be outputted by a lightning:formattedNumber component. I can give pass either value individually to the component and it renders, but not when I attempt to add these together.

Here is the syntax I'm using, but it renders nothing:

{!myAttr.value1 + myAttr.value2}

Example:

<aura:iteration items="{!v.myControlWrapper}" var="myAttr" indexVar="ind"> 
    ...
        <lightning:formattedNumber value="{!myAttr.value1 + myAttr.value2}" style="currency" currencyCode="USD" />

Answer 1

Without more context, it's hard to tell, but you do need to make sure that your attributes are actually numbers, and that the data is mapped correctly. Here's a copy-paste example you can use; this might help you debug the problem.

<aura:application >
    <aura:attribute name="rows" type="List" default="[]" />
    <aura:iteration items="{!v.rows}" var="row" indexVar="rowindex">
        <div data-row="{!rowindex}" class="demo">
        <lightning:input name="value1" onchange="{!c.update}" step="0.01" label="Value1" type="number" value="{!row.value1}" />
        <lightning:input name="value2" onchange="{!c.update}" step="0.01" label="Value2" type="number" value="{!row.value2}" />
        <lightning:formattedNumber value="{!row.value1 + row.value2}" style="currency" currencyCode="USD"/>
        </div>
    </aura:iteration>
    <lightning:button label="Add row" onclick="{!c.add}" />
</aura:application>

---

({
    update: function(component, event, helper) {
        let rows = component.get("v.rows");
        debugger;
        let index = event.target.closest('div[data-row]').dataset.row;
        let field = event.target.name;
        rows[index][field] = event.target.value;
        rows[index].value1 = parseFloat(rows[index].value1);
        rows[index].value2 = parseFloat(rows[index].value2);
        component.set("v.rows", [...rows]);
    },
    add: function(component, event, helper) {
        let rows = [...component.get("v.rows"), {value1: 0, value2: 0}];
        component.set("v.rows", rows);
    }
})