时间戳

首页 > 解决方案 > 使用 [ngClass] 的问题 - ExpressionChangedAfterItHasBeenCheckedError

angular - 使用 [ngClass] 的问题 - ExpressionChangedAfterItHasBeenCheckedError

问题描述

当我尝试在我的 Angular 应用程序中使用 [ngClass] 时，我收到以下错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ngClass：未定义'。

它在我收到错误后调用更改时起作用，问题似乎出在初始化期间。

这是HTML：

  <div class="switch-wrapper">
    <button [ngClass]="loginSelected ? 'selected' : ''" (click)="selectLogin()">
      Login
    </button>
    <button [ngClass]="signupSelected ? 'selected' : ''" (click)="selectSignup()">
      Signup
    </button>
  </div>

这是 TS：

export class LoginComponent implements AfterContentInit {

  loginSelected = true;
  signupSelected = false;

  constructor(private cdRef: ChangeDetectorRef) {
  }

  ngAfterContentInit() {
    this.cdRef.detectChanges();
  }

  selectLogin() {
    this.loginSelected = true;
    this.signupSelected = false;
  }

  selectSignup() {
    this.loginSelected = false;
    this.signupSelected = true;
  }
}

这个问题在这里被问了很多次，但建议的解决方案似乎对我不起作用。我尝试过的事情：

  1. 不使用 ChangeDetector。
  2. 进行更改，然后调用 .detechChanges()。
  3. 调用 .detechChanges() 然后进行更改。
  4. 只是初始化值。
  5. 使用 ngOnInit 和不同类型的 ngAfter***()。
  6. 以上任意组合。

如果有人可以帮助我，我将不胜感激。我知道错误可能是我的一部分，这让我发疯了。谢谢！

标签： angulartypescriptdata-bindingangular7

解决方案

就.detectChanges();这样移动。

  selectLogin() {
    this.loginSelected = true;
    this.signupSelected = false;
    this.cdRef.detectChanges();
  }

  selectSignup() {
    this.loginSelected = false;
    this.signupSelected = true;
    this.cdRef.detectChanges();
  }

推荐阅读