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（但它仍为我呈现列表）

要解决此问题，我发现，如果将常见问题组件更改检测策略设置为OnPush，然后在ngAfterContentChecked中触发markForCheck()，它将消除该错误。

所以我的问题是为什么这不好？还是有另一种方法可以遍历viewChildren？

Answer 1

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

另一方面，我不太确定此更改是否可以改善更改检测并消除异常，您可以升级并告诉我们：D，但您的方法似乎正确，因为这是我们必须避免的错误方式v7，希望它不会在v8中发生。
快乐的ng编码！

带有ViewChildren的ExpressionChangedAfterItHasBeenCheckedError

1 个答案: