帶有ngClass且沒有子組件的ExpressionChangedAfterItHasBeenCheckedError

Question

我正在嘗試使用自定義邏輯將活動類應用於我的路由， routerLinkActive由於某些原因不起作用（可能是我的父級和子級路由是動態的）。 這是代碼：

<ul class="navbar-nav">
   <li class="nav-item eds-service"
     *ngFor="let service of services"
     [routerLink]="['', _dataService.flavor, service]"
     [ngClass]="{'active': _urlService.getCurrentService() === service}"
     (click)="changeService(service)">
     {{ service | readableName | titlecase }}
   </li>
</ul>

我的路由文件如下所示：

{ path: ':flavor', component: ComparePageComponent },
{ path: ':flavor/:service', component: ComparePageComponent }

加載頁面時，出現以下錯誤：

ServicesComponent.html：10錯誤錯誤：ExpressionChangedAfterItHaHasBeenCheckedError：檢查表達式后，表達式已更改。 先前的值：“ active：false”。 當前值：“ active：true”。

我試圖使用AfterViewInit ， AfterViewChecked ，但無濟於事。

我要去哪里錯了？

Answer 1

嘗試這個：

public constructor(private changeDetector: ChangeDetectorRef) {}

public ngAfterViewInit(): void {
    this.changeDetector.detectChanges();
}

在這里看到： https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4