Проблема с использованием [ngClass] - ExpressionChangedAfterItHasBeenCheckedError

Question

Когда я пытаюсь использовать [ngClass] в своем приложении Angular, я получаю следующую ошибку:

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>

А вот и ТС:

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

Кажется, проблема заключалась в добавлении компонента к Dom с помощью логики в ngOnInit другого компонента. Я отредактирую это, когда пойму, почему это так.

Answer 3

Я думаю, что лучший способ условно добавить класс выглядит так:

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

Также это намного чище. и вам не нужно менять код обнаружения, angular делает это автоматически.