ViewChildren's QueryList.changes doesn't detect changes

I’m submitting a …

[x ] bug report 
[ ] feature request
[ ] support request

Current behavior When subscribing to QueryList.changes created by a ViewChild, any changes to bound variables are not detected.

Expected behavior

Template to be updated
If this is WAI, the debug change detector should detect that a bound variable was changed and throw, similar to updating bound variables in ngAfterViewChecked.

Minimal reproduction of the problem with instructions Plunker

Issue Analytics

State:
Created 7 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

3reactions

rupebaccommented, Oct 19, 2016

I am experiencing similar problems. Sounds pretty serious to me (and similar to #10962 ?)

Real case scenario for me:

<tabs-panel #tab>
     <template newTab>
         <tab title="TabTitle {{ tab.numberTabs() }}">
               content for new tabs
         </tab>
    </template>
</tabs-panel>

When the template gets projected at any time with createEmbeddedView(...), the @ViewChildren(Tab) query that I have at TabsPanel does not get notified with the new tab.

1reaction

timblakelycommented, Oct 14, 2016

Sure!

Expected: Clicking the “Populate!” button adds a child component Foo, gated by an *ngIf directive. A ViewChildren-generated QueryList.changes observable is subscribed to that should add a message to the template an array when an event arrives. The message says “A ‘<foo>’ element was added”

Actual: When the button is clicked, the Foo component appears. The .changes event is fired, and the message is added to the template. However, the change detection is not run, causing a disconnect between the model and the template. The disconnect can be rectified by clicking the other button to force change detection via ChangeDetectorRef.markForCheck. No warning message about changing after it was checked is shown.

Desired: Any other observable I’ve ever used that changes the template in the .subscribe function correctly causes change detection to occur. A QueryList generated via ContentChildren works just fine (new plunker), so I suspect this has to do with the timing of the ViewChildren’s query firing after content checking as opposed to in a new microTask.