Question

当我尝试在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;
  }
}

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

不使用ChangeDetector。
进行更改，然后调用.detechChanges（）。
调用.detechChanges（），然后进行更改。
只需初始化值即可。
使用ngOnInit和不同类型的ngAfter ***（）。
以上任何组合。

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

Answer 1

只需像这样移动.detectChanges();。

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

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

Answer 2

我认为有条件添加类的最佳方法是这样的：

<button [class.selected]="loginSelected" (click)="selectLogin()">
  Login
</button>
<button [class.selected]="signupSelected" (click)="selectSignup()">
  Signup
</button>

它也更清洁。而且您不需要更改检测代码，angular会自动执行。

Answer 3

问题似乎是通过另一个组件的ngOnInit中的逻辑将组件附加到Dom。当我明白为什么会这样时，我将对其进行编辑。

使用[ngClass]的问题-ExpressionChangedAfterItHaHasBeenCheckedError

3 个答案: