Angular - sum up number values inside nested *ngFor directive

Question

I want to display some number values from an array of objects, the object itself is containing an array containing some specific data.

i tried going through the values with an *ngFor but the numbers that i am getting are displayed as a concatenation between the different values while i want to sum them up, here's a brief explanation of what i am facing :

the class "Order" :

export class OrdreMission{
    public idOrder:number;    
    // other attributes here
    public concern:Concern [];
    public costs:costs[];
    constructor(){
        this.mission = new Mission();    
        this.costs= [];
        this.concern = [];
    }
}

how i am looping through my array (ofc after getting the appropriate data from my backend provider)

     <table>
            <thead> <!-- my headers --> </thead>
            <tbody> 
                <tr *ngFor="let x of listOrders">
                            <!-- other data displayed here -->
                            <td>
                                <span *ngFor="let k of l.costs">
                                    {{k.typeCost.code=="0808" && k!=undefined && k.idOrder==l.costs.idOrder?k.value:return}}
                                </span>
                            </td>
                            <td>
                                <span #old value="0" *ngFor="let x of l.costs">{{x.typeCost.code!="0808" && x.typeCost.code!="0606"  && x!=undefined && x.idOrder==l.costs.idOrder? sum(old.value,x.value):return}}</span>
                            </td>
                            <td>
                                <span #old2 value="0" *ngFor="let o of l.costs">{{o.typeCost.code!="0606"  && o!=undefined && o.idOrder==l.costs.idOrder?sum(old2.value,o.value):return}}</span>
                            </td>
                          <td>
                               <span #old3 value="0" *ngFor="let m of l.costs">{{m.typeCost.code=="0606"  && m!=undefined && m.idOrder==l.costs.idOrder?sum(old3.value,m.value):return}}
                              </span>
                          </td>
                            <!-- other unrelated data here-->
                </tr>
            </tbody>
</table>

sum() method in my component :

 sum(old:any,a:any):number{
    if(!Number(old)){
      return Number(a+0);
    }
    else if (!Number(old) && !Number(a)){
      return 0;
    }
    return  Number(a)+Number(old);
  }

the results that i am getting are concatenated such as this :

As you can see the result displayed in last column is a concatenation between the first and second columns values,

that same column should be including the sum of the two previous columns and other values, but it's just making a concatenation.

use +a+old or Number(a)+parseInt(old) similarly for other return Number(a)+0; — Niladri
– Niladri, Commented May 4, 2018 at 11:35
Why you want to display one value with *ngFor? Use some method in component - pass parameter to it from template if thats necessary — Julius Dzidzevičius
– Julius Dzidzevičius, Commented May 4, 2018 at 11:55
which result you added in image, unable to undertand the code, why did you used ngFor multiple times, you can use that single time and write a condition — Sravan
– Sravan, Commented May 4, 2018 at 11:59
i used ngfor because i have a nested array inside each object of that "listOrders" array, and i want to loop through it so i can get my data — Yassine Ben Hamida
– Yassine Ben Hamida, Commented May 4, 2018 at 12:02

Yassine Ben Hamida · Accepted Answer · 2018-05-04 13:16:09Z

2

Fixed it by using dedicated methods in my component,

seems like my approach of extracting the numbers in my template was wrong, the template could'nt differenciate between Numbers and strings in my case, so it just considerates it a string value no matter what the provided type is.

below is my new approach :

getTotal(val:Costs[]):number{
    let sum = 0;
    if(val!=undefined){
      val.forEach(element => {
        if(element.typeCost.code!="0606") sum+=element.value; 
      });   
    }
    return sum;
  }

and in HTML i used :

<td>{{getTotal(l.costs)}}</td>

answered May 4, 2018 at 13:16

Yassine Ben Hamida

6307 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - sum up number values inside nested *ngFor directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related