low performance in binding function in view - html

Question

i have an ionic 4 with angular app, im also implemented websocket in my componentA.
componentA.html:
<div *ngFor="let item of myList">
<div>{{ item.name }}</div>
<div>{{ calcPrice(item.price) }}</div>
<div>{{ calcDistance(item.distance) }}</div>
<div>{{ calcAge(item.age) }}</div>
<div>{{ setColor(item.color,item.name) }}</div>
</div>
here a sample of myList:
[
{...},
{...},
{...},
{...},
...
]
myList is an array and normaly contain 20 items, those items is updated with my websocket. I faceing a big performance issue when i enter the page, my app completely freeze when my list passes aproximately 8 items, so a started do to a big research and i discovery that using functions on view is a bad pratice
articles: here and here
Every function that i uses have a return and I need those function do make calculations and etc, putting this inside html will make the code dirty and hard to maintein.
what i shoud do to make this work propertly? should i use pipes for each item?
Edit:
here is one of the functions that i used in my html
calcVolum(item) {
if (
TestClass.startsWithA(item.name) &&
!this.needHelp(item.name)
) {
return (
Number(item.price.replace(this.regexPts, '')) *
Number(item.currentQuantity) *
item.age
);
} else if (this.needHelp(item.name)) {
return (
Number(item.price.replace(this.regexPts, '')) *
Number(item.currentQuantity) *
item.dolptax *
item.age
);
}
return (
Number(item.price.replace(this.regexR$, '').replace(',', '.')) *
item.currentQuantity
);
}

Answer 1

you set up your component so that things are run when they need to be run.
write a function like:
calculateItemValues(items) {
return items.map(i => {
return Object.assign({}, i,
{
priceCalc: this.calcPrice(i.price);
// however many else you need
}
);
});
}
call that whenever you need to (when the items change), maybe like this.calcItems = this.calculateItemValues(this.items) or inside an rxjs map statement is usually a great place, and iterate the calculated:
<div *ngFor="let item of calcItems">
<div>{{ item.name }}</div>
<div>{{ item.priceCalc }}</div>
<!-- whatever else you set -->
</div>