ExpressionChangedAfterItHasBeenCheckedError与ViewChildren

Question

我“修正”了这个错误，但我想确保我没有做我不该做的事情，因为这只是感觉不对，…

下面是我设计的示例，我有两个组件faqComponent和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>

我希望由父组件上的questionsAnswer组件动态生成列表，通过使用视图子组件，这是我想要的方式。

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

除了在日志中得到一个ExpressionChangedAfterItHasBeenCheckedError之外(但它仍然为我呈现列表)

为了解决这个问题，我发现如果我将faq组件更改检测策略设置为OnPush，然后在ngAfterContentChecked中触发一个markForCheck()，它就会消除该错误。

所以我的问题是为什么这很糟糕？或者还有其他方法可以迭代viewChildren呢？

Answer 1

这是在v8中解决的问题，在ViewChildren和ViewContent上有一个显式的static标志。因此，如果您是ng update @angular/core，更新示意图将将static: false添加到您的questionAnswers中，因为它将检测到它们是动态的，并且它们将在ngAfterViewInit之后可用。

另一方面，我不太确定这个更改是否改进了更改检测并删除了异常，您可以升级并告诉我们:D，但是您的方法似乎是正确的，因为这是我们必须避免v7中的错误的方法，希望它不会发生在v8中。

祝你编码愉快！