Angular array change detection issue

Question

I am working on a notification component in which I have an array of "error" objects and iterate through them using *ngFor. My issue is that Angular won't pick up the changes to the array when I mutate it inside a subscription.

My code is the following:

  ngOnInit() {
    this.store.select().pipe(
      map(state => state.error),
      filter(error => !!error),
      map(error => ({text: error, display: 'block'}))
    ).subscribe(error => {

      // this does not get detected
      this.errors.push(error);

      setTimeout(() => {
        error.display = 'none';
      }, 4000)
    });

    // this gets detected
    this.errors.push({
      text: 'asd',
      display: 'block'
    })
  }

And the related html:

      <div class="notification-wrapper">
          <div *ngFor="let error of errors" [style.display]="error.display" class="notification is-danger has-text-right">
              {{ error.text }}
          </div>
      </div>

The weird thing is that if I replace the subscription with a setInterval in which I constantly add dummy errors, the changes are caught by Angular and it behaves normally.

Can someone explain to me why it works this way, and maybe how to fix this? Thank you.

where do you display your errors can you share the html please? — JSmith
– JSmith, Commented Nov 2, 2019 at 1:49
How do you send those errors? Are you sure that your subscription is executed inside Angular zone? — yurzui
– yurzui, Commented Nov 2, 2019 at 1:55
@yurzui I have a service that holds a BehaviourSubject which gets returned as an Observable via the select method. I'm not sure what "Angular zone" means, but the code inside the subscription gets executed, I checked. — Paul Cosma
– Paul Cosma, Commented Nov 2, 2019 at 1:58

yurzui · Accepted Answer · 2019-11-02 02:04:21Z

2

Looks like your code is executed outside of Angular zone. You can force to run it inside:

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

...

this.store.select().pipe(
  map(state => state.error),
  filter(error => !!error),
  map(error => ({text: error, display: 'block'}))
).subscribe(error => {

  this.ngZone.run(() => {
    this.errors.push(error);

    setTimeout(() => {
      error.display = 'none';
    }, 4000)
  });
});

answered Nov 2, 2019 at 2:04

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adrian Brand Over a year ago

Don't do this, use observables with the async pipe.

Collectives™ on Stack Overflow

Angular array change detection issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related