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, sub_total: number, grand_total: number, totals: any[]) {
var totals = [];
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:
Grand Total {{ product_price | grandtotal: quantity : sub_total : grand_total : totals }}
Take a look at the first line of your function. You redefine totals as an empty array, regardless of what gets passed in.
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’.”
Which tells me, in the html where you call this, totals might not exist? Inside your function, you’re creating a local array called totals. That doesn’t exist in the larger context, or if our does, your function isn’t seeing it.
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.
I removed sub_total, totals, and grand_total from the parameters.
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;
}
I initialize totals outside of the getter function as totals: any; and I call the getter in the HTML with
Grand Total {{ grandTotal }}
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.
Do you have this in a codepen or repl or repository? Somewhere we can see it in context?
No because it uses modules like firebase that I can’t access in, for example, stackblitz.
Well right, but a github repo would be useful. Don’t need to see it run, but having the actual code surrounding the call seems vital.
My getter throws the following error: ERROR TypeError: Cannot read property ‘push’ of undefined
hen I use totals : number[ ] = [ ]; instead of totals: any[];, the typeerror goes away but it displays NaN for the grand total.
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.
I’m thinking the parse bits are causing that.
Perhaps convert them to numeric values before you pass them in?
The parseInt and parseFloat expressions are changing them to numeric values already.