使用[ngClass]的問題-ExpressionChangedAfterItHaHasBeenCheckedError

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

這個問題在這里已經問過很多遍了，但是建議的解決方案似乎對我不起作用。 我嘗試過的事情：

1. 不使用ChangeDetector。
2. 進行更改，然后調用.detechChanges（）。
3. 調用.detechChanges（），然后進行更改。
4. 只是初始化值。
5. 使用ngOnInit和不同類型的ngAfter ***（）。
6. 以上的任何組合。

如果有人可以幫助我，我將不勝感激。 我知道該錯誤可能是我造成的，這讓我發瘋了。 謝謝！

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。 當我明白為什么會這樣時，我將對其進行編輯。