带有ViewChildren的ExpressionChangedAfterItHasBeenCheckedError

Question

I “fixed” this error but I wanted to make sure i'm not doing something that i shouldn't be, as this just feels wrong…

Here is my contrived example, I have two components faqComponent and questionAnswerComponent

<app-faq>
  <ul>
    <li *ngFor="let questionsAnswer of questionsAnswers">
      {{ questionsAnswer.question }}
    </li>
  </ul>
  <app-question-answer
     question="1. Why Foo Bar when Baz?"
     slug="why-foo-bar-when-baz"
     [activeSlug]="currentSlug"
  >
    <p>
     Lorem ipsum dolor sit amet
    </p>
  </app-question-answer>
    ... // a lot more question answer components
</app-faq>

I want the list to be dynamically generated by the questionsAnswer components on the parent component, This is working the way I want by using view children

@ViewChildren(QuestionAnswerComponent) questionsAnswers: QueryList<QuestionAnswerComponent>;

with the exception that I get a ExpressionChangedAfterItHasBeenCheckedError in the log (but it still renders the list for me)

To fix this I found that if i set the faq component change detection strategy to OnPush and then in ngAfterContentChecked trigger a markForCheck() it gets rid of that error.

So my questions is why is this bad? or is there another way I should be iterating over the viewChildren?

Answer 1

This is the issue addressed in v8 , having a explicit static flag on ViewChildren and ViewContent. So, if you ng update @angular/core , the update schematic will add the static: false to your questionAnswers because it will detect that they are dynamic, and they will be available after ngAfterViewInit .

In the other hand, I'm not quite sure if this change improves the change detection and removes the exception, you may upgrade and tell us :D but you approach seems right because that's the way we had to avoid this error in v7, and hopefully it won't happen in v8.
Happy ng-coding!