Pipe isn't returning the right values

Maureen Moore

I have a pipe that is supposed to add the sub totals together to return the grand total but it just returns the sub total. It returns sub_total = product_price * quantity; and not the sum of the sub totals.

This is my pipe:

@Pipe({
name: 'grandtotal'
})
export class GrandTotalPipe implements PipeTransform {
transform(product_price: number, quantity: number) {
var totals = [];
var sub_total;
sub_total = product_price * quantity;
totals.push(sub_total);
var i;
var grand_total = 0;
for (i = 0; i < totals.length; i++) {
grand_total += totals[i];
}
return grand_total;
}
}

This is how I call the pipe in the HTML:

<div>Grand Total {{ product_price | grandtotal: quantity : sub_total : grand_total : totals }}div>

When I remove "var totals = [];", I get "cannot read property push of undefined." When I just use "var totals;", I get "Subsequent variable declarations must have the same type. Variable 'totals' must be of type 'any[]', but here has type 'any'."

I've tried putting "var totals = [];" everywhere. I've tried putting it before the transform function and I've tried putting it in the component. It can't go anywhere except where it is now but that's leading to my issue so that's no good.

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Maureen Moore6y ago
I used
this.product_price = parseFloat(this.product_price) || 0;
this.quantity = parseInt(this.quantity) || 0;
and the NaN went away but the value is still wrong and I get the error:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
+1
Maureen Moore6y ago
When I use totals : number[ ] = [ ]; instead of totals: any[];, the typeerror goes away but it displays NaN for the grand total.
+1
Maureen Moore6y ago
My getter throws the following error: ERROR TypeError: Cannot read property 'push' of undefined
+1
Maureen Moore6y ago
When I put var totals = []; into my getter it returns a value but the totals array is set to null each time so it returns the wrong value.
+1
Maureen Moore6y ago
I initialize totals outside of the getter function as totals: any[]; and I call the getter in the HTML with
Grand Total {{ grandTotal }}
+1
Maureen Moore6y ago
I tried making a getter like the following but it produces a blank page:
get grandTotal() {
var i;
var sub_total;
var grand_total;
sub_total = this.product_price * this.quantity;
this.totals.push(sub_total);
for (i = 0; i < this.totals.length; i++) {
grand_total += this.totals[i];
}
return grand_total;
}
+1