CODEWITHSUNDEEP
htmlangularperformanceionic4
Igor
Igor

Reputation: 408

low performance in binding function in view

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
    );
  }

Upvotes: 1

Views: 45

Answers (1)

bryan60
bryan60

Reputation: 29355

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>

Upvotes: 1

Related Questions