0

In my component I am iterating over a list which I have received from the ngRx store state:

<div class="employees-component">
  <div *ngFor="let employee of users">
    <div *ngIf="canShowEmployee(employee)">
      <span>{{ employee.firstName }} {{ employee.lastName }}</span>
    </div>
  </div>
</div>

My users list arrives asynchronously from the ngRx state on ngInit :

  ngOnInit() {
    this.store.pipe(select( state => state.slotAssignment.users))
      .subscribe((users: IUser[]) => {
        this.users = users;
      });
  }

I would expect the "canShowEmployee" function to run only when the state.users was updated. Instead it runs infinitely and hangs the page.

(the users list is updated on the store as a result from an api get call which runs only once on page load).

Can anyone advice?

Yaron
  • 1,655
  • 6
  • 20
  • 38
  • 1
    Don't use functions in bindings. your function will be called on every change detection cycle. and angular runs x2 cycles in dev mode. – Vikas Apr 28 '19 at 14:25
  • can you add canShowEmployee(employee) code. – arun kumar Apr 28 '19 at 14:31
  • For the sake of debugging I set the canShowEmployeeCode to be : console.log('running function canshowemployee'); return true; – Yaron Apr 28 '19 at 14:40

0 Answers0