使用 [ngClass] 的问题 - ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Issue with using [ngClass] - ExpressionChangedAfterItHasBeenCheckedError使用 [ngClass] 的问题 - ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2019-08-01 23:35:39
【问题描述】：

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

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改检查后。以前的值：'ngClass: undefined'。

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

这是 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***()。
以上任意组合。

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

【问题讨论】：

请同时说明loginSelected和signupSelected在代码中是如何修改的。
添加了缺失的逻辑！
我无法重现该问题。见this stackblitz。
很奇怪，不知道是什么问题。感谢您的尝试！
this question 的讨论可能对你有所帮助。

标签： angular typescript data-binding angular7

【解决方案1】：

像这样移动.detectChanges();。

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

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

【讨论】：

试过了，还是报错。感谢您的意见！

【解决方案2】：

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

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

而且它更干净。并且您不需要更改检测代码，Angular 会自动执行此操作。

【讨论】：

是的，它更干净，但遗憾的是这也不起作用。不过感谢您的帮助！
它正在工作。请看这里stackblitz.com/edit/angular-eurjuy
是的，我可以看到它，而且它确实有效。但在我的项目中，这似乎不起作用 - 不知道为什么。
好的。没问题。您可以分享更多代码，以便我更好地理解它。
不幸的是，这是组件中当前使用的唯一代码。我删除了其他所有内容进行测试。

【解决方案3】：

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

【讨论】：