How to sum all fields in table

Question

I have a ngFor and invoice total is calculate of price and hours but still i want the totals of all total

<tr *ngFor="let invoice of invoiceItem.rows">
    <td>{{ invoice.rowName }}</td>
    <td>{{ invoice.hours}}</td>
    <td>{{ invoice.price }}</td>
    <td>{{ invoice.comments }}</td>
    <td>{{ invoice.total}} </td>

</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td>total ex 18%</td>
    <td>{{ totals }}</td>
</tr>

and in the typescript file i have the constructor that should calculate the totals. After many hours I think its time to ask:(

export class DemoTestComponent {
    public invoiceItem: ItemInvoice;
    public invoiceItem2: ItemInvoice;

    public invoices: InvoiceData;
    public invoiceRows: InvoiceDetailsRows[];
    public totals: number;
    //public theTex: number;
    //public totalsAfterTax: number;
    constructor(http: Http) {
        http.get('/api/Invoice/test/1').subscribe(result => {
            this.invoiceItem = result.json();
            this.invoiceItem.rows.forEach((item) => {
                item.total = calculate(item);
            })
            var tempnumber;
            this.invoiceItem.rows.forEach((item) => {
                tempnumber += item.total;
            })
            this.totals = tempnumber;
            //this.theTex = this.totals * 0.18;
            //this.totalsAfterTax = this.totals + this.theTex;

        });

    }
}

Amit kumar · Accepted Answer · 2017-02-05 01:39:41Z

may be the problem you are facing is because of you are calling this in constructor. you should call it in ngoninit. all our http request should be in lifecycle hooks not in constructor.

  export class DemoTestComponent {
            public invoiceItem: ItemInvoice;
            public invoiceItem2: ItemInvoice;

            public invoices: InvoiceData;
            public invoiceRows: InvoiceDetailsRows[];
            public totals: number;
            //public theTex: number;
            //public totalsAfterTax: number;
            constructor(http: Http) { }
            ngOnInit() { 
              http.get('/api/Invoice/test/1')
                    .map(result => result.json())
                    .subscribe(result => {
                    this.invoiceItem = result;
                    this.invoiceItem.rows.forEach((item) => {
                        item.total = calculate(item);
                    })
                    var tempnumber=0;
                    this.invoiceItem.rows.forEach((item) => {
                        tempnumber += item.total;
                    })
                    this.totals = tempnumber;
                    //this.theTex = this.totals * 0.18;
                    //this.totalsAfterTax = this.totals + this.theTex;
                });
             }
          }

are you getting any error ? if you still get any error then show your Json data. i will edit my answer.

borislemke · Accepted Answer · 2017-02-05 01:03:08Z

1

You have not initialised var tempnumber;, therefore, it is undefined and will return NaN when you try to sum it in the loop.

Change this bit:

var tempnumber;

to

var tempnumber = 0;

And try to use let in block scoped variables instead of var.

Or with reduce

let tempnumber = 0;
this.invoiceItem.rows.reduce((total, current) => tempnumber = total + current, tempnumber);

this.totals = tempnumber;

answered Feb 5, 2017 at 1:03

borislemke

9,1965 gold badges43 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to sum all fields in table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related