帶有NgsScrollReveal的Angular 7 ExpressionChangedAfterItHaHasBeenCheckedError

Question

我正在使用ngScrollReveal，它會導致每個滾動事件重新呈現。 我正在通過HTML調用函數，如下所示：

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

toggleAlternate()的定義如下所示：

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

但是，在每個滾動事件上都會出現以下錯誤：

錯誤錯誤：ExpressionChangedAfterItHasBeenCheckedError：檢查表達式后，表達式已更改。 先前的值：“ alternate：false”。 當前值：“ 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>

基於從父組件返回的alter值，我設置了CSS類。

Answer 1

您永遠不要調用從HTML更改組件狀態的函數。 在每個更改檢測周期都會調用此函數，因此組件的狀態永遠無法穩定。

似乎您想在組件中為所有其他實例設置CSS類。 為此，您應該使用*ngFor公開的even和odd變量，可以在文檔中找到它們。

您的代碼需要進行如下修改：

<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;
}