Angular2 re-renders on every mouse movement

Question

I have a Angular2 (2.4.0) application which presents a list in a ngFor loop, and I've noticed that every time a move the mouse the list is getting re-rendered. Has any one else noticed similar behavior and/or know why it's like this?

The table that is getting re-rendered:

<table class="responsive-table bordered highlight">
  <tbody>
    <tr *ngFor="let person of getPersons()">
      <td>{{person.name}}</td>
    </tr>
  </tboby>
</table>

I've added a console.log statement in getPersons() and it's getting logged on every mouse movement.

Answer 1

Using the method, which return array of objects, is very bad solution. You should iterate the static array or using pipe (it depends on the case).

Try call your function in constructor (or ngOnInit method), for example:

In your TypeScript file:

@Component({
    selector: 'some-selector',
    templateUrl: 'template.html'
})
export class SomeComponent {

   someArray: any[];

   ngOnInit() {
      this.someArray = getPersons();
   } 

   getPersons() {
      //some code...
   }
}

and in your HTML file ( template.html ):

<tr *ngFor="let obj of someArray">
...
</tr>