angular: [beta.16 regression] ngFor and ChangeDetectionStrategy.OnPush not updating with .markForCheck()

This may be related to #8242 but that issue is specifically about event handlers not causing the change detector to run, and I saw that they got it working by adding a call to .markForCheck() on the ChangeDetectorRef.

I’m seeing that change detection isn’t working even with a .markForCheck() call.

I have a component that keeps a count that increments on an interval, note it marks the change detector after changing the count.

var Component1 = ng.core
    .Component({
        selector:"cmp1",
        template:"<div>Count: {{count}}</div>",
    })
    .Class({
        constructor:[
            ng.core.ChangeDetectorRef,
            function(cdr){
              this.count = 0;
              setInterval(function(){
                this.count++;
                cdr.markForCheck();
              }.bind(this), 500);

            }
        ]
    });

I have another component that uses that component in an *ngFor with changeDetectionStrategy.OnPush

var Component2 = ng.core
    .Component({
        selector:"cmp2",
        template:'<div>Component 2 (ngfor):</div><cmp1 *ngFor="#a of [1,2]"></cmp1>',
        directives:[Component1],
        changeDetection: ng.core.ChangeDetectionStrategy.OnPush,
    })
    .Class({
        constructor:[
            function(){}
        ]
    });

and another component that uses the first component twice, not in an *ngFor

var Component3 = ng.core
    .Component({
        selector:"cmp3",
        template:'<div>Component 3 (no ngfor):</div><cmp1></cmp1><cmp1></cmp1>',
        directives:[Component1],
        changeDetection: ng.core.ChangeDetectionStrategy.OnPush,
    })
    .Class({
        constructor:[
            function(){}
        ]
    });

and the root app uses all three components.

var AppComponent = ng.core
    .Component({
        selector:'test-app',
        template:`
            <cmp1></cmp1>
            <cmp2></cmp2>
            <cmp3></cmp3>
        `,
        directives:[
            Component1,
            Component2,
            Component3,
        ]
    })
    .Class({
        constructor:[
            function() {
                window.app = this;
            }
        ]
    });

In beta.16 component 1 and 3 update, but component 2 stays at 0. In beta.15 they all update as expected.

Here’s a plnkr of it not working in beta.16: http://plnkr.co/edit/waoh6evhRvOvX1yMuOKG?p=preview Here’s the same thing in beta.15: http://plnkr.co/edit/a5POuqddYbG5C9oVuzA8?p=preview

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 10
  • Comments: 19 (6 by maintainers)

Most upvoted comments

I’m also seeing this issue, my app is also heavily dependent on OnPush and markForCheck().

Completely broken in b16 and b17

Anyone tested this issue on rc1? I am planing a migration soon and would like to know if it is safe… Thanks