CODEWITHSUNDEEP
htmlangulartypescript
shaharnakash
shaharnakash

Reputation: 675

How to sum all fields in table

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;

        });

    }
}

Upvotes: 1

Views: 692

Answers (2)

Amit kumar
Amit kumar

Reputation: 6147

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.

Upvotes: 1

borislemke
borislemke

Reputation: 9146

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;

Upvotes: 1

Related Questions