Angular 7 ExpressionChangedAfterItHasBeenCheckedError 与 NgsScrollReveal答案

【问题标题】：Angular 7 ExpressionChangedAfterItHasBeenCheckedError with NgsScrollRevealAngular 7 ExpressionChangedAfterItHasBeenCheckedError 与 NgsScrollReveal
【发布时间】：2019-01-05 09:13:20
【问题描述】：

我正在使用 ngScrollReveal，它会导致重新渲染每个滚动事件。我通过 HTML 调用一个函数，如下所示：

<component [alternate]="toggleAlternate()">

toggleAlternate() 的定义如下：

toggleAlternate() {
  this.alternate = !this.alternate;
  return this.alternate;
}

但是，每次滚动事件都会出现以下错误：

错误错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“替代：假”。当前值：'alternate: true'。

我尝试了一些解决方案，例如注入 ChangeDetectorRef 和在 toggleAlternate() 方法中调用 detectChanges()，但是，这并没有解决错误。我是 Angular 的新手，不确定我能做些什么来解决这个问题。

有没有办法不在每次渲染时调用 toggleAlternate() 方法？

目前，用户界面工作正常，但我想删除控制台错误。

更新

我试图将我的工作经验作为一个时间表，其中每个条目都与前一个条目交替。

下面是调用toggleAlternate()的地方：

<app-work-ex-position *ngFor="let job of year[Object.keys(year)[0]].jobs" [job]=job [alternate]="toggleAlternate()">
</app-work-ex-position>

<app-work-ex-position /> 组件如下所示：

<app-work-ex-timeline-entry (expand)="onExpandEntry($event)" class="{{alternate ? 'alternate' : ''}}">

<app-work-ex-timeline-entry-dot class="{{isExpanded ? 'primary-circle' : 'primary-circle circle-not-expanded'}}"
                      [size]="30"
                      [isAlternate]="alternate">
</app-work-ex-timeline-entry-dot>
</app-work-ex-timeline-entry>

根据父组件返回的alternate值，我设置了css类。

【问题讨论】：

[alternate] 在每次渲染时都会被解释，因此toggleAlternate 在每次渲染时都会被调用。你能显示包含alternate 属性的组件吗？
@ChaitanyaKhanna 试试这个this.cd.detectChanges();
@DavidWalschots 我更新了上面的代码。如果还有什么不清楚的地方请告诉我。
@Abhishek 可以向我展示如何使用它的示例。我确实尝试过，但也许我没有正确使用它。
@ChaitanyaKhanna 你看看这个（stackoverflow.com/questions/43375532/…）。或者在 AppComponent 中使用这个constructor(private cd: ChangeDetectorRef) { } ngAfterViewInit() { this.cd.detectChanges();}

标签： angular typescript

【解决方案1】：

您永远不应该调用改变 HTML 中组件状态的函数。这个函数会在每个变化检测周期被调用，因此组件的状态永远不会稳定。

您似乎想在组件中为每个其他实例设置一个 CSS 类。为此，您应该使用*ngFor 公开的even 和odd 变量，可以在documentation 中找到。

您的代码需要进行如下调整：

<app-work-ex-position 
    *ngFor="let job of year[Object.keys(year)[0]].jobs; even as isEven" 
    [isAlternate]="isEven">
</app-work-ex-position>

set isAlternate(value: boolean) {
  this.alternate = value;
}

【讨论】：