Angular 2 Async pipe does not render new values with Observable

Question

I'm using NgRx Store in my app.

Home.html

<list-objects
      [array]="array| async"
      (Edit)="Edit($event)"
      (Delete)="Delete($event)"
 ></list-objects>

Home.ts

export class HomePage {
     public array: Observable<itm[]>;

     constructor(){
          this.array= this.store.select(state => state.array);

          this.array.subscribe((a) => {
             console.log(a); //VALUES OK
          }
      }

      Edit(event){
          this.store.dispatch(this.actions.updateItem(event.item));
      }
  }

When I edit an item of array, async pipe does not update the view but the values in "array" objects are corrects (console.log inside the subscribe shows the updated value). When I click somewhere in the DOM (open modal, click buttons...), view updates with new values.

I log also in the child component "ngOnChanges" and it doesn't fire with new value.

It represents the state of my app. "import {Store} from '@ngrx/store';" — Mario Rossi
– Mario Rossi, Commented Aug 26, 2016 at 12:23
The code in the question does not appear to be complete; how can you use this.store without its being initialised? Could you post more complete/representative code? — cartant
– cartant, Commented Aug 26, 2016 at 13:16

reach4thelasers · Accepted Answer · 2016-08-26 13:01:01Z

0

Try something like this:

(Note this code isn't tested).

<list-objects
      [array]="array"
      (Edit)="Edit($event)"
      (Delete)="Delete($event)"
 ></list-objects>

export class HomePage {
     public array: itm[];

     constructor( private zone:NgZone ){
        this.store.select(state => state.array).subscribe((a) => {
              this.zone.run(() => {
                   this.array = a;
              });
          }
      }

      Edit(event){
          this.store.dispatch(this.actions.updateItem(event.item));
      }
  }

I've removed the async pipe from the template, and assigned the array directly. By doing this inside this.zone.run the digest cycle will trigger and your template will re-render.

The digest cycle normally only triggers under a number of pre-defined circumstances e.g. Http method callback, UI input. None of which are occurring here, so Angular doesn't know to update.

answered Aug 26, 2016 at 13:01

reach4thelasers

27k24 gold badges95 silver badges127 bronze badges

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

3 Comments

cartant Over a year ago

Under what circumstances will the async pipe not work and the zone boilerplate be required? This is a little disturbing.

reach4thelasers Over a year ago

Under the circumstances where something outside of Angular is pushing stuff in. Angular doesn't know that something has happened. Internal angular classes do zone.run under the hood to trigger the digest (like when you use the Http service). Its frustrating. And I've been through the same battle myself recently with the async pipe.

vanrado Over a year ago

Thanks for example about how to workaround, but we should use async pipe - it is best practice. I have very similar problem without using NgRx Store and still do not know where is problem.

Shlomi Levi · Accepted Answer · 2016-10-17 21:25:49Z

0

Try:

constructor(private changeDetector: ChangeDetectorRef) {
              this.array= this.store.select(state => state.array);

              this.array.subscribe((a) => {
                 console.log(a); //VALUES OK
                 this.changeDetector.markForCheck();
              }
          }

answered Oct 17, 2016 at 21:25

Shlomi Levi

3,3231 gold badge27 silver badges39 bronze badges

1 Comment

Shlomi Levi Over a year ago

why to mark it as down?????? it's the way to mark up your changes and start digest cycle. try it please. do not use zone. you need to put it by change detector cycle.

Drikus Roor · Accepted Answer · 2018-01-23 16:10:28Z

Change detection isn't triggered by ngrx store automatically (and it shouldn't) so you don't see UI updating. There are only several things which trigger change detection automatically: UI input (click, key presses etc...), HTTP response, timers (setTimeout and setInterval).

You can solve your issue in two ways:

Enable changeDetection: ChangeDetectionStrategy.OnPush and then update your array explicitly with subscribe, in that case you will need to call markForCheck():

import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';


@Component({
    ...,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePage {
    public array: itm[];
    constructor(private ref: ChangeDetectorRef) {
        this.store.select(state => state.array).subscribe(a => {
            this.arr = a;
            this.ref.markForCheck();
        });
    }
}

The second way is to inject ChangeDetectorRef and call detectChanges() in subscribe. But don't do so. And don't use NgZone for it.

ngrx + ChangeDetectionStrategy.OnPush is a good way to improve your change detection performance.

Collectives™ on Stack Overflow

Angular 2 Async pipe does not render new values with Observable

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related